使用jQuery选择器选取第一个具有特定类名的子孙元素

Question

I have this HTML structure:

    <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时，我想要改变 ul 的第一个子元素（class为.item）的背景颜色。

我尝试了以下代码，但它没有生效：

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

- quelquecosa

---

$('ul').find('.item').first() - Blender

Answer 1

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

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

这将把所选元素集合缩小到第一个选定的元素。

如果您有多个列表并且想要针对每个列表的第一个li.item元素，可以使用.map:

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

- Felix Kling

Answer 2

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

- hugerth

Answer 3

另一种方法是$("li.item").first().css('background-color','red');

- vanval