CODEWITHSUNDEEP
jquerytraversal
qwerty
qwerty

Reputation: 5246

jQuery - Not sure which method to use, closest() and parent() don't work

God i feel like i'm spamming stackoverflow, this is my 3rd post for today. Sorry, heh.

I even posted a question regarding this before, kind of, but i've changed the code a bit since so i thought it was better to post a new question.

$('.pmlist ul li h4 .toggle').click(function() {
    $(this).closest('.meddel').toggle(250);
});

That's what i've got now. The reason why the closest() method isn't working is because the div .meddel is just next to the h4 element. And closest() only crawls right up the DOM tree, ignoring other child elements. Right? parent() works almost the same and doesn't work either.

And as i only want to toggle the closest .meddel div in the element, i need something that, yeah justs grabs the nearest one, and not all of them.

To clear it up a bit, here's the HTML for one list item:

<li class="item">

<h4><a class="toggle">[topic]</a><small>2010-04-17 kl 12:54 by <u>[name]</u></small></h4>

<div class="meddel">
    <span>
        <img style="max-width: 70%; min-height: 70%;" src="profile-images/img.jpg" alt="" />
        <a href="account.php?usr=47">[name]</a>
    </span>

    <p>text</p>
</div>

</li>

I have several items like that, and if i click one toggle link, i just want the nearest .meddel to be toggled, as mentioned before.

Thanks.

Upvotes: 6

Views: 2584

Answers (3)

Crozin
Crozin

Reputation: 44386

You could just use:

$(this).parent().next().toggle(250);

Update (according to tvanfosson comment):

$(this).parents(".item").find(".meddel").toggle(250);

This is a much more flexible and safer solution. First it gets the entry container (.item), then find the body of the entry and toggles it. It's less sensitive to feature changes in DOM.

Upvotes: 9

tvanfosson
tvanfosson

Reputation: 532575

Go up all the way up to the list element, then find the contained element with the matching class. This will be more robust with respect to most minor DOM changes, i.e., it doesn't rely on relative placement.

$('.pmlist ul li h4 .toggle').click(function() {
    $(this).closest('li').find('.meddel').toggle(250);
});

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630559

Here's another way to approach this:

$('.pmlist ul li h4 .toggle').click(function() { 
  $(this).closest('h4').siblings('.meddel').toggle(250); 
});

This goes up to the <h4>, then looks for a sibling .meddel element to toggle. You can read more on .siblings() here. This method keeps it a bit more resilient to markup changes, but if the script is tightly coupled anyway, that may not be much of a concern.

Upvotes: 5

Related Questions