jQuery getting an Element by Class of the parent

Question

my HTML looks like this:

<div class="wrapper">
<div class="container1">
This is the Element i want to toggle
</div>
<div class="container2">
<a href="#" class="button">Click</a>
</div>
</div>

I want to toggle the container1 by clicking the button. The thing is there are several of these structes, so i can't use an ID. I need to use the event.target function in jquery, but i don't know how to get the parent element and the "container1" element in the parent element and how to toggle it with slideToggle.

It depends, is it always the previous sibling of the button container that you want to toggle? If so, you could just do a `.parent().prev('div')` to get from the `` to the `.container1` div. The parent goes to .container2, then .prev('div') selects .container1. — Daniël Knippers, Feb 26 '14 at 14:29

score 1 · Answer 1 · answered Feb 26 '14 at 14:37

1

Try this

$('.button').on('click', function(e){
    e.preventDefault();
      $(this).closest('.wrapper').find('.container1').toggle();
});

answered Feb 26 '14 at 14:37

Jai

74,255
12
74
103

+1: Although the use of `on` is less readable than `click` in this instance, this is my favorite answer. It is the most likely to survive HTML changes (and it correctly disables the anchor click). – iCollect.it Ltd Feb 26 '14 at 14:58

score 0 · Answer 2 · edited Feb 26 '14 at 14:34

0

$('.button').click(function(){
  $(this).parent().siblings('.container1').toggle();
});

edited Feb 26 '14 at 14:34

cuongle

74,024
28
151
206

answered Feb 26 '14 at 14:29

goten

1,000
9
9

Or perhaps `.parent().siblings().first().toggle()`. Kinda depends on what the html may/may not look like. – RubenGeert Feb 26 '14 at 14:39

score 0 · Answer 3 · answered Feb 26 '14 at 14:31

0

You can use closest() and siblings() here:

$('.button').click(function(e) {
    e.preventDefault();
    $(this).closest('.container2').siblings('.container1').toggle(); 
})

Fiddle Demo

answered Feb 26 '14 at 14:31

Felix

37,892
8
43
55

@TrueBlueAussie not true. Without it you will be scrolled to the top of the window – longchiwen Feb 26 '14 at 14:50

score 0 · Answer 4 · answered Feb 26 '14 at 14:32

0

Try:

 $("a").on("click",function(e){
     var el=$(this); // this will be a element
     el.parents(".wrapper").find(".container1").toggle();
    });

"parents" - this will get you parent element with class "wrapper" "find" - this will find child element with class "container1" inside wrapper

If you bind to event with jquery then "this" scopes to target element. You can also get target from event argument "e.target"

here is jsfiddle: http://jsfiddle.net/25vaT/

answered Feb 26 '14 at 14:32

longchiwen

822
6
11

1

`closest` would always be preferable to `parents` in this situation. You don't need/want a search back to the DOM root. – iCollect.it Ltd Feb 26 '14 at 14:34
@TrueBlueAussie you are correct. Perf comparison can be found here http://jsperf.com/jquery-parents-vs-closest/8 – longchiwen Feb 26 '14 at 14:38
Perf stats aside (that is useful though), stopping when you find a first match is obviously going to be faster than searching every parent, back to the root, for any/all matches :) – iCollect.it Ltd Feb 26 '14 at 14:40
I agree. But answer should be used more as a concept (you wouldn't select all "a" elements either), not as something you copy/paste to solution. You can easily traverse to destination element using only vanilla javascript - if you wish to squeeze out max performance :) – longchiwen Feb 26 '14 at 14:44
You know, I did not even spot your use of "a"... not good when `class="button"` was provided. Aside from those issues I do prefer your specific selectors though as they are more robust to HTML changes :) Jai's answer is the "most correct" of this bunch (IMHO), although `click` would be preferable as his `on` is not delegated anyway (like yours). – iCollect.it Ltd Feb 26 '14 at 15:01
Click is shorthand for on("click") (http://api.jquery.com/click/). You can read good pros/cons between those two here http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click . I prefer on/off syntax, because it's more intuitive and it gives you possibility for event namespacing. e.g. on("click.mynamespace") and off(".mynamespace") – longchiwen Feb 26 '14 at 15:19

RubenGeert · Accepted Answer · 2014-02-26T14:41:27.193

0

Perhaps for this case you could use something like

$('.button').click(function(){
    $(this)
        .parent()
        .siblings()
        .first()
        .toggle();

See this fiddle for a tiny demo.

edited Feb 26 '14 at 14:41

answered Feb 26 '14 at 14:33

RubenGeert

2,902
6
32
50

@TrueBlueAussie: good catch, I thought the OP was mainly about the selector. – RubenGeert Feb 26 '14 at 14:47
Personally, I would not have chosen this answer as the correct one as it is the most fragile. It depends on the exact structure (instead of selector matching), which is always a bad idea for maintenance. Well done anyway :) – iCollect.it Ltd Feb 26 '14 at 14:50

jQuery getting an Element by Class of the parent

5 Answers5