选择tr及其“所有子元素”;-查找jquery选择器

Select tr and its "tr childs" - find jquery selector

本文关键字：查找 选择器 jquery 所有子元素 元素 及其 tr 选择      更新时间：2023-09-26

我的表如下所示:

<table class="highlight">
 <tbody>
    <tr class="sortable"><td>first row</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to row one)</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to row one)</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to row one)</td></tr>
    <tr class="sortable"><td>second row</td></tr>
    <tr class="sortable"><td>third row</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to third row)</td></tr>
    <tr class="sortable"><td>fourth row</td></tr>
    <tr class="sortable"><td>fifth row</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to fifth row)</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to fifth row)</td></tr>
 </tbody>

我想选择每一行及其"折叠"子行。

说明:https://jsfiddle.net/4k1a6xp6/4/

我认为可以通过使用jquery的子">"选择器来解决。所以我们可以用jQuery("table.highlight").find("tr.sortable > ??? ")

? ?在到达下一个父行之前，应该选择带有" sortable nondraggable sub "的子行。

我怎样才能做到这一点?

[EDIT]基于答案的一个可能的解决方案:https://jsfiddle.net/4k1a6xp6/6/

选择父行(使用如下所示的特定选择器，或者根据您的需求在每个选择器上迭代)，然后使用nextUntil with:not selector。例如:

$('tr.sortable').first().nextUntil('tr.sortable:not(.nondraggable.sub)')

OK，据我所知，您想同时选择父行和折叠行。

看看下面的小提琴

 $('tr.sub').css('background-color', 'yellow');
var sibling = $('tr.sub').prev();
//console.log(sibling);

$(sibling).each(function(index, item) {
  console.log(item);
  if (!$(item).hasClass('sub')) {
    $(item).css('background-color', 'blue');
  }
});

它假设您的"父"行没有任何类，并且检查父行缺失的.sub类。

颜色不同只是为了突出显示。如果您可以将类添加到父行，这将更容易:)

代码段

$('tr.sub').css('background-color', 'yellow');
var sibling = $('tr.sub').prev();
//console.log(sibling);
var solorows  = $('tr.sortable').next('.sortable:not(.nondraggable.sub)');
$(solorows).each(function(index,item){
//console.log(item);
if($(item).next('tr.nondraggable.sub')){
 $(item).css('background-color','red')
}
});
$(sibling).each(function(index, item) {
 // console.log(item);
  if (!$(item).hasClass('sub')) {
    $(item).css('background-color', 'yellow');
  }
});
.highlight {
  table-layout: fixed;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="highlight">
  <tbody>
    <tr class="sortable">
      <td>first row</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to row one)</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to row one)</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to row one)</td>
    </tr>
    <tr class="sortable">
      <td>second row</td>
    </tr>
    <tr class="sortable">
      <td>third row</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to third row)</td>
    </tr>
    <tr class="sortable">
      <td>fourth row</td>
    </tr>
    <tr class="sortable">
      <td>fifth row</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to fifth row)</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to fifth row)</td>
    </tr>
  </tbody>

相关文章：