javascript - 在元素的父元素的前一个兄弟元素上切换类

Question

当单击某些元素时，我想在该元素的父元素的前一个兄弟元素(不是全部，只有一个)上切换一个类，其中该元素还没有特定的类('item')。

HTML:

<tr id="product1">
    <td>Product</td>
    <td>Text</td>
</tr>
<tr class="item" id="sku1">
    <td>SKU</td>
    <td class="valueButton">Button</td>
    <td>Text</td>
</tr>
<tr id="product2">
    <td>Product</td>
    <td>Text</td>
</tr>
<tr class="item" id="sku2">
    <td>SKU</td>
    <td class="valueButton">Button</td>
    <td>Text</td>
</tr>
<tr class="item" id="sku3">
    <td>SKU</td>
    <td class="valueButton">Button</td>
    <td>Text</td>
</tr>

JS:

$(document).on({
    click: function () {
        $('tr', $(this).parent().prev(":not('.item')")).toggleClass('blueChecked');
    }
}, "tr.item td:not('.valueButton')");

Answer 1

使用 .prevAll()并只保留第一个..

$(this).parent().prevAll(':not(.item)').first().toggleClass('blueChecked');

您使用的 prev 仅检查紧接的前一个元素。选择器将针对该元素进行测试，如果匹配则保留它。

演示在 http://jsfiddle.net/UtJPS/