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 时，我只想更改 ul 的第一个具有 .item 类的子元素的背景颜色

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

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

Answer 1

First 不接受选择器，as you can see in the documentation 。将 .find 或 .children 与 .first 一起使用:

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

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

如果您有多个列表并希望定位每个列表的第一个 li.item 元素，则可以使用 .map:

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