jquery click with a loop?

Question

I am trying to put a click function on a php loop.

But its doing part or all of the function on all the links..

I thought if used "this" it would solve it but it's not working..

Here is the jquery:

if ($('#like').hasClass('notlike')); {
    $('.likeon').click(function () {
        $('#like span.message', this).text('Yes I Like It');
    });
};

Here is the html:

<li id="like" class="notlike">
    <span>
        (3) Likes <br>
        <span class="message">
            <a href="javascript:;" class="likeon">Do You Like it?</a>
        </span>
    </span>
</li>

I am looping with php so the link appears 5 times. What Am I doing Wrong?

redsquare · Accepted Answer · 2009-07-21 06:20:19Z

3

I think you have a few issues.

Element ID's must be unique inside the dom. if you are looping over that html fragment then you will end up with multiple li tags with an id of like. You need to remove the id and use a class

e.g

<li id="like" class="notlike">
<span>(3) Likes <br>
   <span class="message">
   <a href="javascript:;" class="likeon">Do You Like it?</a>
   </span>
</span>
</li>

This will then allow you to write script as follows

$('li.someClass a.likeon').click ( function(){
   $(this).parent().text('Yes I Like It');
});

Also the context selector you were trying would never have worked as when you passed in the 'this' context it looks for elements below that match the selector. You did not have any child elements of the anchor with an id of like.

If you are changing these classes in script during the lifespan of the page then I would advise to use .live instead. This will mean that the event will fire even for anchors that do not currently have a class of likeon. If you later change the anchor to have that class it will still run

$('li.someClass a.likeon').live('click' , function(){
   $(this).parent().text('Yes I Like It');
});

edited Jul 21, 2009 at 6:20

answered Jul 20, 2009 at 18:20

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

matthewb Over a year ago

This works nicely, just need to get it to go up back to the li above the link to remove the "notlike" and change it to a different one. But only for that one link..

redsquare Over a year ago

you can use .closest('li') to get the first li up. So $(this).closest('li').removeClass('notlike')

matthewb Over a year ago

Yup perfect, I was trying prevAll() but this works. Thank You

redsquare Over a year ago

prevAll() is for siblings not parents

redsquare Over a year ago

$(this).addClass('y').siblings().removeClass('x')

|

RaYell · Accepted Answer · 2009-07-20 18:28:40Z

1

Would be better to define click event handler like this

$('#like.notlike .likeon').click(function () {
    $(this).parent().text('Yes I Like It');
});

It's even shorter.

answered Jul 20, 2009 at 18:28

RaYell

70.6k20 gold badges127 silver badges154 bronze badges

Collectives™ on Stack Overflow

jquery click with a loop?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related