在元素的父级的先前同级上切换类

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/

Answer 2

我认为这可以做到：

$('table').on('click', 'td', function () {
    var $tr = $(this).closest('tr');
    var $last = $tr.siblings()
        .filter(':not(.item)')
        .filter(':lt('+ $tr.index() + ')')
        .last();
    if ($last.length) {
        $last.toggleClass('blueChecked');
    }
});