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

Appreciate your efforts to explain the problem using fiddle but I think it is still confusing, can you explain in simple terms what exactly are you looking to do? (forget about the fiddle for a while) — Atif, Feb 11 '13 at 08:37
What I want is to toggle a DIV from a link which is positioned WITHIN a previous div . — Obmerk Kronen, Feb 11 '13 at 08:59

Jai · Accepted Answer · 2013-02-11T09:35:51.903

4

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/

edited Feb 11 '13 at 09:35

answered Feb 11 '13 at 08:38

Jai

74,255
12
74
103

Thanks for the answer , but in your fidddle that link element is positioned exactly like in my first (working ) example . When I move it up to the previous div It does not work as well ( my second example) – Obmerk Kronen Feb 11 '13 at 08:59
ok, that seems to work, but the whole markup is changed .. The whole second div is moved . Is there a way of doing so WITHOUT moving the second div , just the link ? – Obmerk Kronen Feb 11 '13 at 09:29
yep, i am sorry, I just tried, and it DOES work on this specific example . thanks . somehow however on the REAL website markup, it is still not working for me , but I guess I have some other unresolved issues .. – Obmerk Kronen Feb 11 '13 at 09:36

score 1 · Answer 2 · answered Feb 11 '13 at 08:37

1

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/

answered Feb 11 '13 at 08:37

JohnJohnGa

15,446
19
62
87

Thanks, I saw that in my examples above, I just do not understand the "why" - but that is my lacuna . In the meantime, how can I target the right div in the right way in my question ? . – Obmerk Kronen Feb 11 '13 at 09:01

score 0 · Answer 3 · answered Feb 11 '13 at 08:42

0

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);
});

answered Feb 11 '13 at 08:42

turiyag

2,757
2
22
21

Thanks for the advice .. but this markup is a part of a LIST , which have many items with same class , but without IDs.. – Obmerk Kronen Feb 11 '13 at 08:52

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

3 Answers3