Identify specific element with jQuery

Question

I'm implementing a vote system and I want to use jQuery. I have the working code for the vote on a single page, but the problem is that I want to be able to vote from my main page as well and I don't know how to identify for which post the vote is intended.

My HTML looks like this:

<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

(please ignore the multiple span tags)

This is the JS code I have right now:

$(".voteUp").click(function(){
    $.post(voteAction({postid: '5', type: 'up'}), function(data){
        $("")
    });
});

So how do I identify for which post the click is meant (and replace the hardcoded postid with the chosen id?) I could add the postid with ${post.id} somewhere in the html, but I don't see how to exactly use it. I can't afford to generate a custom jQuery .click function for each post, right?

EDIT:

Any idea how I update the span tags content afterwards? I tried this but it's not working:

$.post(voteAction({postid: this.id, type: 'up'}), function(data){
    $(".voteUp a span").html(data);
});

what is `voteAction`? and `$.post` needs the url as the 1st parameter — Naftali, Jun 16 '11 at 19:41
Could you not give the
elements an ID? E.g.
and use jQuery to get the id of parent element that is of type
? You will need to have your postid(s) somewhere. — Colin, Jun 16 '11 at 19:47
@Colin: problem was I didn't know how to select the id once I add it to the p element. — , Jun 16 '11 at 20:01

score 2 · Answer 1 · answered Jun 16 '11 at 19:44

You need to add the postid somewhere in your template. It doesn't matter where as long as you can retrieve it every time.

Example:

<p>
post #2 content
<span><a href="#" class="voteUp" rel="${post.id}">I approve this message <span>${post.upvotes}</span></a></span>
</p>

$(".voteUp").click(function(){
    $.post(voteAction({postid: $(this).attr('rel'), type: 'up'}), function(data){
        $("")
    });
});

score 1 · Answer 2 · answered Jun 16 '11 at 19:44

1

Store the postid on the element using an data- attribute, e.g.

<p data-postid="5">
    <a href="#" class="voteUp">
</p>

Then on your click event:

$(".voteUp").click(function(){
    var $postBlock = $(this).closest("p"); // gets the post block

    var postid = $postBlock.data("postid"); // 5

    ...
}

answered Jun 16 '11 at 19:44

BrunoLM

97,872
84
296
452

But why `data-postid`, it breaks standards compliance. – roberkules Jun 16 '11 at 19:46
1

No it doesn't, it is valid HTML 5: http://ejohn.org/blog/html-5-data-attributes/ The question I have is how well this is handled in all the different browsers. – Daff Jun 16 '11 at 19:48
@roberkules @Daff It works even on IE6 http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6/2413263#2413263 – BrunoLM Jun 16 '11 at 19:50
But is everybody doing now only HTML5? And yes, IE6 supports it - just saying it breaks standards compliance (a validator check will throw an error) – roberkules Jun 16 '11 at 19:52

score 0 · Accepted Answer · answered Jun 16 '11 at 19:44

add an id attribute to each link element:

<p>
post content
<span><a href="#" class="voteUp" id="1">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 content
<span><a href="#" class="voteUp" id="2">I approve this message <span>${post.upvotes}</span></a></span>
</p>

reference the element in the JS code:

$(".voteUp").click(function(){
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        $("")
    });
});

I'm going with this one, seems like the easiest solution. Thanks! — , Jun 16 '11 at 19:59

score 0 · Answer 4 · answered Jun 16 '11 at 19:45

0

you could store the id in the surrounding p tag

<p id="post-234">

</p>

and extract it from there using e.g. jQuery

$(this).closest("p").attr("id").split("-")[1] --> the ID

answered Jun 16 '11 at 19:45

roberkules

6,557
2
44
52

Trey · Answer 5 · 2011-06-16T19:50:54.220

0

Add an id to the wrapper of the post along with a specific class ie.

<div class="post-votable" id="post-5">
<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

then

$(".voteUp").click(function(){
    $.post(voteAction({postid: $('this').closest('.post-votable')[0].id.split('-')[1], type: 'up'}), function(data){
        $("")
    });
});

edited Jun 16 '11 at 19:50

answered Jun 16 '11 at 19:45

Trey

5,480
4
23
30

missing `'-'` inside your `split()` – js1568 Jun 16 '11 at 19:50

score 0 · Answer 6 · answered Jun 16 '11 at 19:45

0

Give each link an ID that matchs the post ID, and then use

$(this).attr('id')

For the post ID

answered Jun 16 '11 at 19:45

Tom Walters

15,366
7
57
74

score 0 · Answer 7 · answered Jun 16 '11 at 19:50

I think you'll want to investigate using html5 data attributes.

For instance, your html may become:

<a href="#" class="voteUp" data-post-id="5">I approve....</a>

While your JS would read:

$(".voteUp").click(function(){
    $.post(voteAction({postid: $(this).data("post-id"), type: 'up'}), function(data){
        $("")
    });
});

While this isn't the best doc available, this should

Identify specific element with jQuery

7 Answers7