Use the each function to apply the click handler to each element in the selector's array.
$("p").each(function(){ click function goes here }); diddymao wrote: > > Hi all. I'm just starting out on JQuery and I've it hit a minor > confusion. I have the following HTML: > > <p id=one></p> > <p id=two></p> > <p id=three></p> > <p id=four></p> > > And I'd like to add an event where if you click on one, the clicked > element gets bigger and the rest turn shrink. So I run the following > javascript function > > function() > { > $("p").click(function() > { > var selectedP = $(this); > $("p").animate({ height: ($(this) != selectedP ? 20 : 5) }, > 100); > } > ); > } > > My problem is when I run the function and click, all the elements grow > instead of just the one. I would guess that my usage of the statement: > "$(this) != selectedP" is somehow incorrect. I assumed that when I called > ".animate()" on an array of elements, it would call the method on each > element individually and correctly map $(this) to the current element that > was being called. If this is not the case, how can I get similar > functionality? > > Note my current workaround code is as follows: > function() > { > $("p").click(function() > { > var selectedP = $(this); > selectedP.animate({ height: 20 }, 100); > $("p").not(selectedP).animate({ height: 5 }, 100); > } > ); > } > > This does indeed work, but it just doesn't seem as nice as the former. > Any help appreciated! :) > > BTW, I am loving what I have found in JQuery so far. I've turned a 20 > line mootools piece of code into 7 JQuery lines! Beautiful :). > -- View this message in context: http://www.nabble.com/Iterating-over-Arrays-and-%24%28this%29-tf3351425.html#a9319975 Sent from the JQuery mailing list archive at Nabble.com. _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/