What attribute (or...) to use when trying to grab a single item's id from a list in jQuery?

Question

Revised: I have a list items on the page that I'm creating from database records (messages). Each record contains an Id value that I'm currently putting into each individual message. What I'd like to do is when they click on a view link to grab the message's Id value so that I can then manipulate it with javascript.

Generated html looks like:

<div id"messages">
  <div class="message">
    A cool message <a href="/Message/View/1" id="message_1" class="viewMessage">View</a>
  </div>
  <div class="message">
    A cool message <a href="/Message/View/2" id="message_2" class="viewMessage">View</a>
  </div>
  <div class="message">
    A cool message <a href="/Message/View/3" id="message_3" class="viewMessage">View</a>
  </div>
  <div class="message">
    A cool message <a href="/Message/View/4" id="message_4" class="viewMessage">View</a>
  </div>
</div>

When I click on id=message_1 I want to get the id value of 1. I'm trying to avoid string manipulation in order to get the id value: like get the value after a '_'. It would be great if I could use a single attribute with the value '1' in it.

$('.viewMessage').click(function() {
  ...$(this).messageId...
});

Can I just make an attribute up? I'll actually try this too, but am thinking about the whole xhtml strict stuff so was thinking there's something better than doing that.

Answer 1

Trying to access the id of the clicked link?

Try this

$('.viewMessage').click(function() {
  var id = $(this).attr('id');
});

Answer 2

I'm assuming that you want to extract the numeric part of the id inside the click handler.

$('.viewMessage').click( function() {
   var id = this.id.replace(/message_/,'');
   ...now go use it...
});

Answer 3

This grabs a number from the href of the anchor.

$('.viewMessage').click(function() {
    var id = this.href.match(/\d+/);
});

If you want to use something like .messageId, you want to preprocess first:

$('.viewMessage').each(function() {
    this.messageId = this.href.match(/\d+);
    // Or, to be more safe:
    this.messageId = parseInt(this.href.match(/\d+), 10);
}).click(function() {
    alert(this.messageId);
});

Answer 4

If you want to adopt (X)HTML 5, it allows arbitrary attributes whose names start with "data-" for exactly this sort of situation. So this could be something like <a id="message_1" data-message-id="1">. Otherwise, I think you're going to have to be nonconforming. 37signals uses this technique.

Answer 5

I believe that in the next spec of html there is a provision for custom attributes. You prefix them with data-
So, data-id would be valid.

BTW: I typically go with custom attributes.

Answer 6

I don't really understand why you set id="message_1" when you really only want the 1, but assuming there's a reason and you won't change it, you could use the rel attribute instead.

<div id"messages">
    <div class="message">
        A cool message <a rel="1" href="/Message/View/1" id="message_1" class="viewMessage">View</a>
        A cool message <a rel="2" href="/Message/View/1" id="message_2" class="viewMessage">View</a>
    </div>
</div>

That should be valid XHTML, and you should be able to grab just the index with

var id = $(this).attr("rel");