jquery id from list items?

Question

Ok, so i've got a list of usernames from the mysql database. But, i need the ID from the database so i was thinking something like this,

<li id='43'>Monica</li>
<li id='47'>Henrik</li>
<li id='77'>Eric</li>

But how can i get the ID from the list?

Is your question "how to get the id for the `li` elements *from* the database?" or "how go get the id *of* the `li` elements?" — David Thomas, Mar 07 '11 at 15:04
[ID and NAME tokens must begin with a letter (A-Za-z) and may be followed by any number of letters, digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").](http://www.w3.org/TR/html4/types.html#h-6.2) — epascarello, Mar 07 '11 at 15:04
Do not start an id with number. Here are rules for choosing ids: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html/79022#79022 — Ivan Ivanic, Mar 07 '11 at 15:04
@epascarello and @Ivan, **unless** it's under a html5 doctype. It's only html4 (and presumably below) that refuse to accept numbers as the first characters of an `id`. References: [HTML5 allows almost any value for the `id` attribute, use wisely](http://www.456bereastreet.com/archive/201011/html5_allows_almost_any_value_for_the_id_attribute_use_wisely/). — David Thomas, Mar 07 '11 at 15:18
... and that will be safe to use about 2018. But thanks for info. — Ivan Ivanic, Mar 07 '11 at 15:34
@Ivan actually it's safe to use now, since the spec is based on existing browser behaviour. — roryf, Mar 07 '11 at 17:09

roryf · Answer 1 · 2011-03-07T17:11:59.037

I would use something like the following:

<ul id="items-list">
    <li id='member-43'>Monica</li>
    <li id='member-47'>Henrik</li>
    <li id='member-77'>Eric</li>
</ul>

then:

$('#items-list li').each(function() {
    var id = $(this).attr('id').split('-')[1];
});

It was pointed out in the comments that as of HTML5 it's perfectly valid to start an id attribute with a number, but I'd still give preference to this method, especially if there are to be multiple lists on a page from different DB tables (ids still need to be unique). An id of 43 has no meaning to anyone, but member-43 is much more clear.

score 1 · Answer 2 · edited May 08 '12 at 19:22

Have a normal javascript on click event for the list element as shown below:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
      linkClicked = function (index) {
        alert($('#myList li').get(index).id);
      }
    </script>
  </head>
  <body>
    <ul id='myList'>
      <li id='43' onclick="linkClicked($(this).index())">Monica</li>
      <li id='47' onclick="linkClicked($(this).index())">Henrik</li>
      <li id='77' onclick="linkClicked($(this).index())">Eric</li>
    </ul>
  </body>
</html>

This worked for me!

score 1 · Answer 3 · edited Mar 31 '16 at 19:57

1

You could add a class with the same name to all of the list items

<li class="test" id='43'>Monica</li>
<li class="test" id='47'>Henrik</li>
<li class="test" id='77'>Eric</li>

Then you could use an on

$(".test").click(function(){
$(this).attr("id");
});

edited Mar 31 '16 at 19:57

Wai Ha Lee

8,598
83
57
92

answered Mar 31 '16 at 19:27

Re3L

25
4

score 0 · Answer 4 · answered Mar 31 '16 at 20:25

You Can Use HTML5 Data Attribute in order to hold ID Data . Holding data in ID may give problem if you require to define id statically at some place so not an optimal solution You can check code below -

<li  data-empid="A123" data-salary="120" class="datalist">Monica</li>
<li data-empid="A124" data-salary="121" class="datalist">Monica</li>

Access Data in Data Attribute in Jquery

<script type="text/javascript">
 $( "li .datalist" ).click(function() {    
       $(this).data("salary")
    });
</script>

score 0 · Answer 5 · answered Mar 07 '11 at 15:01

0

$('li').each(function(){
  alert( $(this).attr('id') );
});

answered Mar 07 '11 at 15:01

hsz

148,279
62
259
315

score 0 · Answer 6 · answered Mar 07 '11 at 15:03

0

Try

$("li").eq(0).attr("id")

Substitute 0 by the index item of the list item you want to read the id of.

answered Mar 07 '11 at 15:03

Nikhil

3,304
1
25
42

score 0 · Answer 7 · answered Mar 07 '11 at 15:16

Do you actually want to do something with that id? There is too little data that you gave us. If you want to administer users you would need something like this:

<ul id="deleteUsers">
  <li id='user43'><a href="deleteuser.php?id=43">Monica</a></li>
  <li id='user47'><a href="deleteuser.php?id=47">Henrik</a></li>
  <li id='user77'><a href="deleteuser.php?id=77">Eric</a></li>
</ul>

And than in jQuery override click event. roryf gave you good example.

jquery id from list items?

7 Answers7