Question

我的表格如下：

<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”的子trs，直到到达下一个父行。

我该如何做到这一点？

[编辑] 基于答案的一种可能解决方案：https://jsfiddle.net/4k1a6xp6/6/

Answer 1

选择父行（使用特定选择器，如下所示，或根据您的要求迭代每个选择），然后使用nextUntil和:not选择器。例如：

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

Answer 2

好的，据我所知你想要选择父行和折叠的行。

查看下面这个小提琴。

 $('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>

选择tr及其“tr childs” - 找到jquery选择器

2 个答案: