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
[email protected]
http://jquery.com/discuss/
