Question

Given the following HTML structure:

<div id="wrapper">
    <div id="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div id="middle">
        some text
    </div>
    <div id="bottom">
        some text
    </div>
<div>

How would I select the bottom div (div#bottom) using JQuery when a user clicks on the link in the top div (div#top)? There will be several of these divs on the page, so I can’t just use $('#bottom'). $(this).next('#comment-form') also did not work.

Answer 1

You say that you’re duplicating id attributes. Don’t do that, use classes instead:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        some text
    </div>
<div>

Your id attributes must be unique within each page or you have invalid HTML and things won’t work very well.

Once you’ve fixed your HTML, things will go much easier:

$('.link').click(function() {
    var $bottom = $(this).closest('.wrapper').find('.bottom');
    // And now do whatever you need to do with your $bottom.
});

The closest function goes up the DOM tree until it finds a match for the supplied selector, then find comes back down to get the .bottom element.