jQuery:选择具有特定类的第一个匹配后代

Question

>我有这个HTML结构：

    <ul>
        <li>one</li>
        <li class="item">two</li>
        <li>three</li>
        <li class="item">four</li>
        <li id="click"> CLICK ME </li>
    </ul>

当我单击 #click 时，我想仅更改具有 .item 类的 ul 的第一个子项的背景颜色

我正在尝试这个，但它不起作用：

    $('#click').click(function(){
        $("ul").first('.item').css('background-color','red');
    });

Answer 1

First 不接受选择器，如文档所示。将.find或.children与.first一起使用：

$("ul").children('.item').first().css(...);

这会将所选元素集减少为第一个选定元素。

如果您有多个列表，并且想要定位每个列表的第一个li.item元素，则可以使用 .map ：

$("ul").map(function() {
    return $(this).children('.item').get(0);
}).css(...);

Answer 2

 $('#click').click(function(){
    $("ul").children('.item').first().css('background-color','red');
});

Answer 3

另一种方法是$（"li.item"）.first（）.css（'background-color'，'red'）;