JQuery - Call for each Item in a Repeater

I have a webpart that contains blogs.  Each blog has a comments link and a like link  (See Attached)Blog Picture.

Each time a user clicks like I want to do something.  Currently the jquery runs only on the first item and on no others.  

Here is the jquery

$(document).ready(function () {
         $('#newlikes').click(function () {
           $(this).hide();
         });
     });

This is the markup

<div id="ZoneLeft">
 
    <span id="newlikes"><a href="#likes">likes</a></span>
  </div>


Can  someone help me on how to get the jquery to fire for each item in my repeater.  

Thanks
sherbug1015Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Repeater
As in asp.net Repeater control?

If so, asp.net should be an included zone for the question.

If so, then the rendered id for each "like" link would need to be unique. What does the rendered source look like? Can you give each "like" link a class and access it through jQuery using that?
0
sherbug1015Author Commented:
I posted the rendered source code in the original post.  I don't think its possible to give each like link a unique class.  How would I know how many classes to create.  This will be a repeater that will grow each day.  

Is there anything else I can do.
0
Tom BeckCommented:
Ids must be unique. If that is the rendered source code for each "like" link then you must correct that. It's been a while since I used asp.net, but I believe the <asp:Label> control renders as a span tag. So if you were to have this in your aspx markup:

<asp:Label ID="newlikes"><a href="#likes">likes</a></asp:Label>

It would render something like:

<span id="Repeater1_ctrl0_newlikes"><a href="#likes">likes</a></span>

The ctrl number would be unique for each "like" link.

What I am suggesting is to add a common class to the span tags like:

<asp:Label ID="newlikes" CssClass="newlikes"><a href="#likes">likes</a></asp:Label>

Then you can do this in jQuery:
$(document).ready(function () {
         $('.newlikes').click(function () {
           $(this).hide();
         });
     }); 

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Rainer JeschorCommented:
Hi,
you should also be able to use the selector where the id ends with newlikes:
$(document).ready(function () {
  $("span[id$='newlikes']").click(function () {
	$(this).hide();
  });
}); 

Open in new window

HTH
Rainer
0
sherbug1015Author Commented:
I can't get either solution to work.  Rainer your solution still only affects one item in the repeater.  Tom your solution is throwing an error "newlikes_1 not found"
0
Rainer JeschorCommented:
Hi,
OK, could you please post the generated HTML?
At least two or three entries?
Without getting the real DOM structure, classes and elements (names/ids) it is really difficult.

Thanks.
Rainer
0
sherbug1015Author Commented:
I copied out three entries.

<div id="Likes">
      <span id="newlikes" class="newlikes"><a href="#likes">likes</a></span>
  </div>
  <div id="Likes">
        <span id="newlikes" class="newlikes"><a href="#likes">likes</a></span>
  </div>
  <div id="Likes">
        <span id="newlikes" class="newlikes"><a href="#likes">likes</a></span>
  </div>
0
Tom BeckCommented:
The ids on the rendered page MUST be unique. You are not setting up your aspx page properly. You must use asp.net controls with ids as I demonstrated.

<asp:Label ID="newlikes" CssClass="newlikes"><a href="#likes">likes</a></asp:Label>

Alternately, you can add runat="server" to your html controls where you have ids.

<div id="Likes" runat="server">  
    <span id="newlikes" runat="server"><a href="#likes">likes</a></span>
 </div>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.