We Keep Coding

Jquery :find class on click

I have to find a class content on click.
Following my HTML code
<div class="row team">
<div class="col-md-3">
<a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">
<img src="img/team/Martin-Duff.png" class="img-responsive" />
</a>
<div class="content">
<p>paragaraph </p>
<p>paragaraph paragaraph </p>
<div class="details">
<!-- content for details div -->
</div>
</div>
By clicking on an image I need to get the HTML for details div. How do I get it?
I tried
$('.team .img-responsive').on('click',function(){
var content= $(this).closest('div.content').html();
console.log(content);
})
But this gives me undefined. Need your help with this.
Thanks!

closest selects the closest matching parent element (if any). The target element is the next sibling of the clicked element's parent. For selecting the target element, you can use the parent and next methods:
var content = $(this).parent().next('div.content').html();

div.content is a sibling of the parent of the img-responsive. You can find the related element by going up to the closest row and then finding the nested element. Not using next() makes it slightly less reliant on the markup layout.
var content= $(this).closest('.row').find('div.content').html();

Get attribute of parent div

I made a div, in a div, in a div and I am trying to access the attribute food of the extern div through the most intern div. How can I do that?
I commented in the code, I'm trying to alert 'banana'.
//alert($('.animals').attr('food')); //alerts banana
//alert($('.mammals').parent().attr('food')); //alerts banana
//alert($('.monkeys').parent().parent().attr('food')); //doesn't alert banana
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animals" food="banana">
<div class="mammals">
<div class="monkeys">
</div>
</div>
</div>

You can use closest() to get to specific parent element of a child element
:
alert($('.mammals').closest(".animals").attr('food'));
alert($('.monkeys').closest(".animals").attr('food')
See closest() in Jquery DOCS here

You can use parents for multiple levels:
$('.monkeys').parents('.animals').attr('food')

Use closest
alert($('.monkeys').closest(".animals").attr("food"))

You can use closet() or parentsUntil(). With parentsUntil, you can even select multiple parents
alert($('.monkeys').parentsUntil(".animals").attr("food"))

Need a more elegant way of finding an element in the dom tree with jQuery

I have a few elements flying around in an element that need to be altered when the window finishes loading ($(window).load...)
When the script loads, I've been struggling to find a more elegant way of finding a string.
Noticeably below, you can also see the rampant re-use of parent and next operators...
I've tried closest but it only goes up the dom tree once (from what I understand) and parents has never really worked for me, but I could be using it wrong.
Ex.
$(window).load( function(){
if($(".postmetadata:contains('Vancity Buzz')").length){
$(this).parent().parent().next().next().next().next('.articleImageThumb img').hide();
}
});
HTML output this runs through looks like this:
<div class="boxy">
<div class="read">
<div class="postmetadata">Vancity Buzz</div>
<div class="articleTitle"></div>
</div>
<div class="rightCtrls"></div>
<div class="initialPostLoad"></div>
<div class="ajaxBoxLoadSource"></div>
<div class="articleImageThumb">
<a href="#">
<img src="image.png" class="attachment-large wp-post-image" alt=""/>
</a>
</div>
</div>

I think you want to do this:
$(".postmetadata:contains('Vancity Buzz')")
.closest('.read') //Closest will get you to the parent with class .read
.siblings('.articleImageThumb').hide(); //this will get you all the siblings with class articleImageThumb
this refers to window there not the element you are checking in the if condition.
Fiddle
I don't know if your intention is to have the empty anchor tag just by hiding the image. if so just add a find to it.

You can just do this
$('.articleImageThumb img').toggle($(".postmetadata:contains('Vancity Buzz')").length)
If there are multiple divs and you do need to traverse then there are multiple ways
$(".boxy:has(.postmetadata:contains('Vancity Buzz'))").find('.articleImageThumb img').hide()
or
$('.postmetadata:contains("Vancity Buzz")').closest('.boxy').find('.articleImageThumb img').hide()
or
$(".boxy:has(.postmetadata:contains('Vancity Buzz')) .articleImageThumb img").hide()

Have you looked into parents http://api.jquery.com/parents/ you can pass a selector like so:
$(this).parents('.boxy').find(".articleImageThumb")
Careful though, If there is a parent boxy to that boxy, parents() will return it and thus you find multiple .articleImageThumb.

How to find first parent element in jquery

Conside below html -
<div class="container1">
<div class="container2">
<div class="container3">
<div class="container4">
<div class="element">
...
</div>
</div>
</div>
</div>
if I want to get <div class="element"> element and I have reference to the container1. In jquery what I do is,
$(".container1").find(".element")
instead of -
$(".container1").children().children().children().find(".element")
This is process to find any child element when I have reference to any of the parent element. But instead when I have reference to a child element and want to get parent element then every time I have to go one level up -
$(".element").parent().parent().parent().parent()
and I can't do like this -
$(".element").findParent()
I have not come across any method like findParent() in jquery. Is there which I am not aware of? Or is it not there for some reason?

$(".element").parents();
will give all parents of .element(including html and body)
DEMO
To find any specific parent, suppose container1 then
$('.element').parents('.container1')
DEMO
jQuery .parents() generally find all parents, but if you passed a selector then it will search for that.

just use
$(".element").closest('#container1');
if no ancestor with that id is found then
$(".element").closest('#container1').length will be 0

To get the first parent personally I use the following construction:
var count_parents = $(".element").parents().length;
$(".element").parents().eq(count_parents - 1);
Hope, it will be helpful for someone.

How to find a parent with a known class in jQuery?

I have a <div> that has many other <div>s within it, each at a different nesting level. Rather than give every child <div> an identifier, I rather just give the root <div> the identifier. Here’s an example:
<div class="a" id="a5">
<div class="b">
<div class="c">
<a class="d">
</a>
</div>
</div>
</div>
If I write a function in jQuery to respond to class d and I want to find the ID for its parent, class a, how would I do this?
I cannot simply do $('.a').attr('id');, because there are multiple class as. I could find its parent’s parent’s parent’s ID but that seems of poor design, slow, and not very polymorphic (I would have to write different code for finding the ID for class c).

Assuming that this is .d, you can write
$(this).closest('.a');
The closest method returns the innermost parent of your element that matches the selector.

Pass a selector to the jQuery parents function:
d.parents('.a').attr('id')
EDIT Hmm, actually Slaks's answer is superior if you only want the closest ancestor that matches your selector.

You can use parents() to get all parents with the given selector.
Description: Get the ancestors of each
element in the current set of matched
elements, optionally filtered by a
selector.
But parent() will get just the first parent of the element.
Description: Get the parent of each
element in the current set of matched
elements, optionally filtered by a
selector.
jQuery parent() vs. parents()
And there is .parentsUntil() which I think will be the best.
Description: Get the ancestors of each
element in the current set of matched
elements, up to but not including the
element matched by the selector.

Extracted from #Resord's comments above. This one worked for me and more closely inclined with the question.
$(this).parent().closest('.a');
Thanks

<div id="412412412" class="input-group date">
<div class="input-group-prepend">
<button class="btn btn-danger" type="button">Button Click</button>
<input type="text" class="form-control" value="">
</div>
</div>
In my situation, i use this code:
$(this).parent().closest('.date').attr('id')
Hope this help someone.

Use .parentsUntil()
$(".d").parentsUntil(".a");