javascript - 单击偶数元素时为偶数元素添加类，单击奇数元素时为奇数元素添加类

Question

我试图在单击偶数元素时向偶数元素添加类，并在单击奇数元素时向奇数元素添加类。

我试过使用 :nth-child(even) :nth-child(odd) 但我似乎无法弄清楚如何判断单击的元素是偶数还是奇数。

考虑这个基本的 HTML

<ul id="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
</ul>

如果单击“二”，元素二、四、大小和八应突出显示。如果单击一个，元素一、三、五和七应突出显示。 (当我说突出显示时，我可能只是添加一个类:

.red {
    background:red;
}

Answer 1

这是一种方法:

Example Here

$("#list > li").on("click",function(){
    $('.red').removeClass('red');
    if($(this).index() % 2 == 0) {
       $('#list > li:even').addClass('red');
    } else {
       $('#list > li:odd').addClass('red');
    }
});

使用 $(this).index() % 2 == 0 判断点击的元素是偶数还是奇数。然后使用 :even 分别添加类/:odd .