jQuery 父级()

Question

jQuery snippet:

$(".sliders dt a").click(function(){
    $(this).parent().parent().parent().find(".triggers a").removeClass("active");
    $(this).toggleClass("active");
    $(this).parent().next("dd").slideToggle("fast");
    return false
});

HTML:

<div class="sliders">
    <div class="triggers">
       <a href="#" class="active">Hide all</a>
    </div>
    <dl>
        <dt>
            <a href="#">text</a>
        </dt>
        <dd>text</dd>
    </dl>
</div>

使用三个 .parent() 来捕获 .triggers 块。 有什么方法可以合并它们吗？

---

jQuery 1.2.6。使用了版本，这就是 .closest() 解决方案不起作用的原因。

Answer 1

这样使用 .closest() ：

$(".sliders dt a").click(function(){
    $(this).closest(".sliders").find(".triggers a").removeClass("active");
    return false
}); 

您可以像 然后返回到 .sliders div 找到下面的 .triggers a。

Answer 2

父母（）如何工作？它沿着 DOM 树向上走并收集所有父级。然后它通过指定的选择器过滤它们。

使用 jQuery 1.4+ 更佳的方法是使用 .closest()。如果页面上有很多节点，它会运行得更快。只是一个想法。

$(this).closest('.sliders').siblings('.triggers').find('a').removeClass(...);

Answer 3

由于 .sliders 和 .triggers 是兄弟姐妹，因此您需要使用 .closest() 来获取 .sliders，然后遍历到.triggers，并获取其内部a元素。

$(".sliders dt a").click(function(){
    $(this).closest('.sliders').prev('.triggers').find("a.active").removeClass("active");
    return false;
});

---

编辑：

问题发生了变化，所以现在答案也发生了变化：

$(".sliders dt a").click(function(){
    $(this).closest('.sliders').find(".triggers a.active").removeClass("active");
    return false;
});