问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于 JQuery 使用 nextUntil 进行筛选问题

头像
jetlag
    221514

    我现在有一个表格

    // 无关代码已省去
<tr>  // 第一个四项 td 的 tr, 已筛选出的元素
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr> // <- 我需要筛选出这个
  <td></td>
  <td></td>
</tr>
<tr> // <- 我需要筛选出这个
  <td></td>
  <td></td>
</tr>
<tr> // 第二个四项 td 的 tr, 到这里就停止筛选, 不包括该项
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
<tr> // 第三个四项 td 的 tr
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

    现在我用 JQ 筛选出了 1 项或者 N 项拥有 4 个 td 的 tr, 比如说我筛选出了上面代码中的第一个拥有 4 个 td 的 tr, 这个变量命名为 a.

    现在我需要继续筛选出 a 后面的有且仅有 2 个 td 的同级元素 tr, 直到遇到拥有 4 个 td 的 tr 元素为止.

    请问我该如何使用 JQ 的 nextUntil 进行操作呢? 其他的方法亦可, 不仅限于 nextUntil.

    更新：
    现在使用了 next 方法解决

    var next = function(obj) {
    var n = obj.next();
    if (n.find('td').length === 2) {
        next(n);
    }
};
a.each(function() {
    next($(this));
});
    javascripthtmlcssjquery
    阅读 1.8k
    1 个回答
    得票最新
    头像
    扬帆启航
      4.3k2721
      ✓ 已被采纳

      image.png
      image.png
      https://www.runoob.com/try/tr...

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.siblings *{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    let trElem = $('tr');
    let tr4Elem = trElem.filter(function(){
      return $(this).find('td').length==4;
    });

    tr4Elem.map(function(){
     let elem = $(this);
     let index = tr4Elem.index(this);
     return {tr4:elem,tr2:elem.nextUntil(tr4Elem[index+1])}
    })
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <table>
    // 无关代码已省去
<tr>  // 第一个四项 td 的 tr
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>1.1</td>
  <td>1.2</td>
</tr>
<tr>
  <td>1.3</td>
  <td>1.4</td>
</tr>
<tr> // 第二个四项 td 的 tr
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
<tr> // 第三个四项 td 的 tr
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
    </table>  
</div>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题