How do I get the id of a list item?

Question

I have a checkboxlist where each item has an id. When the text of an item is clicked the id("cssId") should be printed out in console.log.

Checkboxlist:

<div id="cssListBox" class="list-group">
            <ul id="listItemCss">
                @foreach (var item in Model.CssTemplates)
                {
                    <li id="itemInList">
                        @Html.CheckBox("ChoiceBox", item.IsConnected)
                        @Html.Hidden("cssId", item.Id, new { @class = "cssId" })
                    </li>
                }
            </ul>

        </div>

Jquery:

$('#listItemCss>li').click(function() {
        var cid = (this).val();

        console.log('cid');
    });

Please tell me if I can make the question more clear in some way, I am a bit slow so have patience.

could you post the html that get's outputted rather than the text for the cshtml file please. — George, Jun 02 '15 at 12:25

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

$('#listItemCss>li').click(function() {
    var cid = $(this).find('.cssId').val();
    console.log(cid);
});

Also, don't use the same id for multiple li elements

DEMO

See Why is it a bad thing to have multiple HTML elements with the same id attribute?

edited May 23 '17 at 11:58

Community

1
1

answered Jun 02 '15 at 12:26

AmmarCSE

30,079
5
45
53

I get "undefined" in log when trying this. – FadiY Jun 02 '15 at 12:28
@FadiY, like this it will not .... foreach (var item in Model.CssTemplates) {

AmmarCSE

Jun 02 '15 at 12:32

@FadiY, no it has nothing to do with it. Perhaps I misunderstood what you want. Do you want the value of cssId? – AmmarCSE Jun 02 '15 at 12:39

Yes I want value of cssId. – FadiY Jun 02 '15 at 12:44

Now log says "false". I know I get Id because I can see generated items in browser. – FadiY Jun 02 '15 at 12:57

@FadiY, can you reproduce it in a fiddle? – AmmarCSE Jun 02 '15 at 13:08

Sorry I cant do that since

are database objects.

– FadiY Jun 02 '15 at 13:12

score 0 · Answer 2 · answered Jun 02 '15 at 12:27

0

$('#listItemCss>li').click(function() {
        var cid = (this).attr('id');

        console.log('cid');
    });

answered Jun 02 '15 at 12:27

Manashvi Birla

2,837
3
14
28

Providing an explanation to why your solution works will help your readers learn. – ivan.sim Jun 02 '15 at 15:02

score 0 · Answer 3 · answered Jun 02 '15 at 12:27

0

$('#listItemCss>li').click(function() {
        var cid = $(this).attr('id');

        console.log('cid');
    });

answered Jun 02 '15 at 12:27

Rai Ammad Khan

1,521
2
14
26

How do I get the id of a list item?

3 Answers3