Question

当点击某些元素时，我想在该元素的父亲之前的兄弟（不是全部，只有一个）上切换一个类，其中兄弟姐妹没有特定的类（＆＃39; item＆＃39;）已经。

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');
    }
});

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

2 个答案: