CODEWITHSUNDEEP
jquery
ptamzz
ptamzz

Reputation: 9355

how to identify the id of an HTML element having a certain class

I've my HTML codes as

<li><button id="1" class="vote btn" type="button" /></li>
<li><button id="2" class="voteUp btn" type="button" /></li>  // Only button with class= voteUp
<li><button id="3" class="vote btn" type="button" /></li>
<li><button id="4" class="vote btn" type="button" /></li>
.
.
.
<li><button id="x" class="vote btn" type="button" /></li>

Now through jquery, when I click any of these buttons, I want to find out the id of the button who has got the class 'voteUp'. (There will be only one button having this class).

How can I find it?? I'm trying to figure it out using .hasClass() but not successful till now. Kindly help.

UPDATE:

Actual HTML & PHP codes

<li class="box">
    <div class="temLine">This is the fifth line</div>
    <div class="pushUp"><input id="line5" class="voteUpBtn vote" name="voteUp" type="button" /></div>
     <div class="userName clear">- by ptamzz</div>
     <div class="clear"></div>
</li>

Above code will be looped using PHP and a list will be generated. Like I said, one of the button (input here) will have a 'voteUp' class while all others have 'vote' class.

Upvotes: 0

Views: 413

Answers (2)

Felix Kling
Felix Kling

Reputation: 816282

Inside the click handler:

var id = $(this).parent().siblings('li').find('.voteUp').attr('id');

this will check all other buttons. To find out whether the current button is the one with class voteUp, you can simple use $(this).hasClass('voteUp') (you could also create one expression to check all buttons, but why do an unnecessary (maybe expensive) lookup?).

So in summary, something like:

$('button').click(function() {
    var id;
    if($(this).hasClass('voteUp')) {
        id = $(this).attr('id');
    }
    else {
        id = $(this).parent().siblings('li').children('.voteUp').attr('id');
    }
});

Update:

For a detailed explanation of what the methods do, have a look at http://api.jquery.com

In short:

  • .parent() will get the parent element
  • .siblings('li') will select all the siblings of the element that are a <li> element (siblings are all the other elements that are at the same level as the element (thus having the same parent))
  • .children('.voteUp') will select the children (direct descendants) with class voteUp of an element.
  • .attr('id') returns the value of the id attribute.

You say your buttons are actually wrapped in another div. Then instead of using .parent() and .children(), the call should look like this:

$(this).closest('li').siblings('li').find('.voteUp').attr('id');

where

  • .closest() will return the closest ancestor that matches the selector
  • .find() will return any descendant that matches the given selector

Upvotes: 7

Matt Ball
Matt Ball

Reputation: 359776

If you're binding the click handler on the <button>s or on the <li>s, then inside of your click handler, this will get you the ID of the button with class voteUp:

var buttonID = $(this).closest('ul').find('li > div > button.voteUp').attr('id');

Edited to reflect the actual markup the OP's working with.

Upvotes: 3

Related Questions