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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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?
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.
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

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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
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"
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
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>
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>

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.