从父元素定位到子元素

Question

我有几个列(ul)包含列表(li)。当我单击其中一个元素时，我想首先在列表中找到这个元素，它有一个类'all‘

<div id=1>
    <ul>
        <li class="list all">ALL</li>
        <li class="list">1</li>
        <li class="list">2</li>
    </ul>
    <ul>
        <li class="list">3</li>
        <li class="list">4</li>
    </ul>
    <ul>
        <li class="list">5</li>
        <li class="list">6</li>
    </ul>
</div>
<div id=2>
    <ul>
        <li class="list all">ALL</li>
        <li class="list">1</li>
        <li class="list">2</li>
    </ul>
    <ul>
        <li class="list">3</li>
        <li class="list">4</li>
    </ul>
    <ul>
        <li class="list">5</li>
        <li class="list">6</li>
    </ul>
</div>

在单击任何class="list“时，我希望将"selected”元素addClass为class="all“元素，但只适用于同一包含div的元素。我只是不能用正确的选择器来找到它

parent = $(this).parent().parent().children().$('.all').addClass('selected');

但是它不起作用，我不知道它将如何在包含的div中选择第一个ul。

Answer 1

你可以这样做：

$(".list").click(function(){

$(this).closest("div").find(".all").first().addClass("selected")

})

小提琴演示

单击li父级div，然后查找具有类的第一个元素，所有并添加选中的类。

修订代码：

$(".list").click(function(){

    $(".all.selected").removeClass("selected");
    $(this).closest("div").find(".all").first().addClass("selected")

    })

修正小提琴

Answer 2

可以使用.closest()查找单击list的div父元素，然后使用.find()to find the.all`元素

parent = $(this).closest('div').find('.all').addClass('selected');

演示：小提琴

Answer 3

尝试使用closest查找div类型的直系亲属，然后搜索带有类all的子代，并根据您的意愿为其添加类。

$(".all" , $(this).closest('div')).addClass('selected');