views:

26

answers:

1

I have this jquery selector

 $('.accordion label').live('click',function() {
     alert("hello clicky clicky");
 }

but if I do this

 $('.accordion label:first').live('click',function() {
     alert("hello clicky clicky");
 }

it targets label of first accordion rather than the first label of every accordion

could someone please help

EDIT

HTML

  <fieldset class="horizontal accordion">
   <label class="categorylabel"><div class="accordion_open"></div>Editor Information</label>
   <ul>
    <li>
     <label for="editor" id="editorL"><div class="accordion_open"></div>Editor Name</label>
     <input id="editor" name="editor" class="force_clean" value="" type="text">  
    </li>          
   </ul>
  </fieldset>
+5  A: 

Use the first-child selector instead of first.

first gives you the first instance in the entire set.

first-child gives you each in the set that is the first child of its parent.

$('.accordion > label:first-child').live('click',function() {
     alert("hello clicky clicky");
}

or just use the class name you provided (assuming it is the same for each accordion).

$('.accordion > .categorylabel').live('click',function() {
     alert("hello clicky clicky");
}
patrick dw
targets every label
mcgrailm
@mcgrailm - I see from your HTML that you have additional nested `label` elements. It is an easy fix. Just place `>` in the selector to make it target only the immediate children. Also, you could simply use the `.categorylabel` class. I'll update my answer with both.
patrick dw
awesome thank you
mcgrailm
@mcgrailm - You're welcome. :o)
patrick dw