Question

I have a DOM structure below:

<div class='box'>
    <section id="profile">
        <h1>testuser</h1>
        <div id="following">
            <a class="btn unfollow" style="width: 180px;" rel="nofollow" data-remote="true" data-method="delete" href="/users/testuser/unfollow">Unfollow</a>
        </div>
    </section>
</div>

Then I have a trigger on the response to the link and I have a $(this). I can confirm that I am at this point in the DOM with some console logging.

Doing a $(this).parent() give me the div with the id #following.

However I can’t select the #profile or .box using parents(). Doing a parent().parent() also gives a nil?

Is there some reason I cannot traverse up the DOM tree over the section tag?

Answer 1

Try using $.closest():

$(this).closest(".box");

Of course this problem seems a bit suspicious. I was able to successfully access .box (and #profile) with $.parents without problem:

$(".box").on("click", "a.btn.unfollow", function(e){
  e.preventDefault();
  $(this).parents(".box").css("background-color", "red");
});

http://jsbin.com/uranit/edit#javascript,html

We’d need to see how you went about selecting these elements.