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

首先不接受选择器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(...);

Answer 2

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

Answer 3

另一种方法是。$（ “li.item”）第一（）的CSS（ '背景颜色'， '红'）;

jQuery：选择第一个匹配的后代与特定的类

3 个答案: