finding a class within the same div with jquery

Question

I want to find a class corresponding to another class within the same div.

HTML structure:

<div class="main">
  <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://img2.jpg"></a>
                <p class="votenums"> 20 votes.</p>
  </div>

   <div class="party">
                <a href="#"><img id="1001" class="vote" src="http://imgtwo2.jpg"></a>
                <p class="votenums"> 30 votes.</p>
  </div>

jQuery code is:

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).find(".votenums").text("changed text");
    });
});

When I click img with class vote I want to edit the class votenums, corresponding to the same div. meaning, the desired behavior is, when the image is clicked the text should change.

fiddle is here: http://jsfiddle.net/85vMX/1/

Your's fiddle uses mootools not jquery...

gdoron
– gdoron

2012-02-05 08:01:06 +00:00
Commented Feb 5, 2012 at 8:01 — gdoron
– gdoron, Commented Feb 5, 2012 at 8:01

gdoron · Accepted Answer · 2012-02-05 23:24:05Z

11

find searches down, and .votenums isn't a descendant of .vote you should traverse up to the div and then find the descendant .votenums

$(function() {
    $(".vote").live("click", function(e) {
        e.preventDefault();
        $(this).closest('div').find(".votenums").text("changed text");
    });
});

If the div you want will always has class=party you can search by it:
$(this).closest('.party').find(".votenums").text("changed text");
Class selector is better than element selector

JSFiddle DEMO

find:

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

closest:

Description: Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

edited Feb 5, 2012 at 23:24

answered Feb 5, 2012 at 7:49

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gdoron Over a year ago

@user902620. class selector is more efficient.

mu is too short · Accepted Answer · 2012-02-05 07:50:47Z

1

An easy and robust approach is to go back up to .party using closest and then come back down using find:

$(".vote").live("click", function(e) {
    e.preventDefault();
    $(this).closest('.party').find('.votenums').text("changed text");
});

That lets you change the internal arrangement of .party without breaking your jQuery.

answered Feb 5, 2012 at 7:50

mu is too short

436k71 gold badges863 silver badges822 bronze badges

2 Comments

gdoron Over a year ago

@user902620. you used mootools and not jquery. see my JSFiddle.

mu is too short Over a year ago

@user902620: It works fine if when the fiddle uses jQuery: jsfiddle.net/ambiguous/85vMX/5

JFK · Accepted Answer · 2012-02-05 09:24:16Z

Unless you have a good reason to set the class and ID to the img element, my suggestion would be to go for a tidier html code. After all, it doesn't make sense to apply .preventDefault() on the img tag since not event is expected, in that case this is what the <a> tag is used for so:

<div class="main">
 <div class="party">
  <a id="1001" class="vote" href="#"><img src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg"></a>
  <p class="votenums"> 20 votes.</p>
 </div>
 <div class="party">
  <a id="1002" class="vote" href="#"><img src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg"></a>
  <p class="votenums"> 30 votes.</p>
 </div>
</div>

Notice that I set a different ID for each link above since it's not a good idea to use the same ID for two different elements within the same document. IDs should be unique.

Then your best move would be to upgrade to jQuery v1.7.x (if you haven't yet) and use jQuery .on() instead of .live(). You will find this on the jQuery site:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). ... there is also a good article to read here

Then you could use a less costly function like

$(function() {
 $(".vote").on("click", function(e) {
 e.preventDefault();
 $(this).next('.votenums').text("changed text");
 });
});

And last, the css would need a little tweak too

.vote img{
    height:70px;
    width:70px;   
}

Collectives™ on Stack Overflow

finding a class within the same div with jquery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related