CODEWITHSUNDEEP
javascriptjquerycss-selectorssiblingstargeting
Obmerk Kronen
Obmerk Kronen

Reputation: 15949

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

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" ??

Upvotes: 3

Views: 142

Answers (3)

Jai
Jai

Reputation: 74738

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/

Upvotes: 4

turiyag
turiyag

Reputation: 2887

You could consider a more targeted approach, where in the HTML markup you specify what div is to be hid. This is a common practice with many packages, such as jQuery Mobile.

http://jsfiddle.net/turiyag/R5sDr/

<p class="hider" for="banks">Hide the banks!</p>

$(".hider").click(function(e) {
    var id = $(this).attr("for");
    $("#" + id).hide("slow");
    log("Hiding #" + id);
});

Upvotes: 0

JohnJohnGa
JohnJohnGa

Reputation: 15685

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/

Upvotes: 1

Related Questions