jQuery - targeting Sibilings , Parents , Descendents and other family animals

Question

I had a small markup test for toggling a div .

A (working) mockup can be found here : http://jsfiddle.net/obmerk99/d78aF/1/

The problem is , that I need the Hide / Show link to be placed in ANOTHER div , like here :

http://jsfiddle.net/obmerk99/d78aF/2/

.. and when I move it , it does not work for all my efforts .

I have tried :

jQuery(this).next().next('.toggle').toggle('slow');

and

jQuery(this).next('.toggle').toggle('slow');

and many others, but it is just trial and error - whereas I would like to understand this family stuff (I guess me not being a family person is subconscensly infl;icting on my coding ability :- ) )

Speaking of understanding , In one of my trial and errors , I have made this :

http://jsfiddle.net/obmerk99/d78aF/5/

which is NOT working , but adding a small </br> suddenly makes it work.

http://jsfiddle.net/obmerk99/d78aF/4/

Does an empty </br> tag is considered a "sibling" ??

Answer 1

Try with this one: http://jsfiddle.net/d78aF/6/

jQuery(this).siblings('.toggle').toggle('slow');

As per your comment you can do this way: http://jsfiddle.net/d78aF/7/

jQuery(document).find('.toggle').toggle('slow');

new fiddle: http://jsfiddle.net/d78aF/8/

Answer 2

Does an empty </br> tag is considered a "sibling" ??

What don't you try by yourself?

<div id='firstEl'></div>
<br/>
<div></div>

<div id='siblings'></div>

Then in your js code:

$(function(){
  $('#siblings').text($.makeArray($('#firstEl').siblings()).join(','));
});

Results:

[object HTMLBRElement],[object HTMLDivElement],[object HTMLDivElement]

You can see that the <br/> element is considered as a siblings

http://jsfiddle.net/EP5bj/

http://api.jquery.com/siblings/