jquery selector for different instances of the same class

I don't know if the title is all apt...... but here is my situation....i have a class called dropper and another class drop_list...these two are sub-classes of the class drop_head, the drop_list has to drop down whenever the dropper is clicked...

           <div class="drop_head">
              <div class="dropper"> Content-1</divr>
              <div class="drop_list"> List-1</div>
           </div>
    开发者_StackOverflow       <div class="drop_head">
              <div class="dropper"> Content-2</divr>
              <div class="drop_list"> List-2</div>
           </div>

when content-1 is clicked list-1 has to toggle and when content-2 is clicked list-2 has to drop down... how do i achieve this using single jquery..?? thanks in advance......

If i understand you correctly this should be pretty simple:

$('.drop_head').each(function(i,e){
   $('.dropper', e).click(function(){
      $('.drop_list', e).slideToggle();
   });
});

by using the .drop_head as the context for the list and clickable element you dont need to use id's. additionally if you omit a list or dropper by accident it will only screw up that one "widget" and wont effect the others, which wouldnt be the case with closest.

you have two way (that I see =))
-just give two different ID names to your couples drop-list/dopper

<div class="dropper" id="id_1"> Content-1</divr> 
          <div class="drop_list" id="id_1"> List-1</div>  
<div class="dropper" id="id_2"> Content-2</divr> 
          <div class="drop_list" id="id_2"> List-2</div>

and then say something like:

$(".dropper #id_1").click(function(){$("#id_1").slideToggle("slow")})

or shorter:

$(".dropper").click(function(){$(this).closest('drop_list').slideToggle()})

Hope it helps
Luca