jQuery parent()

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>

Three .parent() is used, to catch .triggers block. Is there any way to merge them?

---

jQuery 1.2.6. version is used, thats why .closest() solutions don't work.

Answer 1

Since .sliders and .triggers are siblings, you need to use .closest() to get .sliders, then traverse over to .triggers, and get its inner a element.

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

---

EDIT:

Question changed, so now answer has changed:

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

Answer 2

You can use .closest() like this:

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

This goes up to the .sliders div then back down to find the .triggers a beneath.

Answer 3

How does parents() work? It walks up the DOM tree and collects all parents. Than it filters them by the selector specified.

Using jQuery 1.4+ more optimal is to use .closest(). It will work much faster if you have a lot of nodes on your page. Just a thought.

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