Question

I’m learning jQuery, as you can see from my last questions. Now I try to make a really big static html a bit more navigable.

A part of the html:

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

My JS:

$("a.entryheader").click(function(){
 alert("clicked");
 $(this).next("div.entrycontent").show();
});

Entrycontent is hidden by default and should only be visible if the user clicks on entryheader.

If I click on entryheader I get the messagebox, but entrycontent stays invisible.

I tried different approaches for $(this).next but none worked.

Probably I lack the understanding of the DOM model. What tools and documentations do you recommend?

Answer 1

The problem is that next() looks for the next element in the html. In your case you are using a bunch of BR tags as separators, so next() will be a BR

Best solution is use the code you have and remove the BR tags and use CSS to apply margin for separation.

If you keep the BR tags, you could use index() method

$("a.entryheader").click(function(){
     var index=$("a.entryheader").index(this)
     $("div.entrycontent").eq(index).show();
});

DEMO using index http://jsfiddle.net/fUeZE/