jQuery addClass 只要至少一个后代有类

Question

只要至少有一个后代 (a.selectable) 具有特定类 (selectedLink)，我就会尝试突出显示表格行。只要它的所有a.selectable 元素都具有提到的类，我就可以突出显示该行，但是如果只有一个a.selectable 元素具有selectedLink 类，我无法让它工作，这是我的目标。

这是问题的一个关键问题：http://jsfiddle.net/Ly4WL/51/ 在第二行，必须单击两个 a.selectable 元素才能突出显示该行，如果任何后代 a.selectable 元素有，我希望它能够工作班级selectedLink。

表格遵循以下格式：

<table>
    <tr>
        <td><a class="selectable" href="joe@mail.com">Joe</a></td>
        <td>Joes Program</td>
        <td>Date</td>
    </tr>
    <tr>
        <td><a class="selectable" href="jane@mail.com">Jane</a></td>
        <td><a class="selectable" href="janeprogram@mail.com">Jane's Program</a></td>
        <td>Date</td>
    </tr>
</table>

为了突出显示单元格和行，我使用了这个 jQuery：

$( 'a.selectable' ).click(function( event ) {
  event.preventDefault();
  //highlight link and rows
  $( this ).toggleClass( 'selectedLink' );
  $( this ).parents( 'tr' ).has( 'a.selectedLink' ).removeClass( 'selectedRow' );
  $( this ).parents( 'tr' ).has( 'a.selectedLink' ).addClass( 'selectedRow' );
  $( this ).parents( 'tr' ).has( 'a:not( .selectedLink )' ).removeClass( 'selectedRow' );
});

Answer 1

问题在于，与is() 不同，.has() 返回一个jQuery 对象（不是布尔值），所以你需要检查它的长度

$('a.selectable').click(function (event) {
    event.preventDefault();
    $(this).toggleClass('selectedLink');
    if ($(this).closest('tr').has('a.selectedLink').length)
      $(this).closest('tr').addClass('selectedRow');
    else
      $(this).closest('tr').removeClass('selectedRow');
});

Demo