Loop through an unordered list using Javascript

Question

I'm having a bit of a struggle to loop through an unordered list, that is produced by kendo-ui. Looking at its markup, it looks like this:

<ul data-role="listview" data-style="inset" data-type="group" id="unitlist">
    <li>
        <li>
            <ul>
                <li id="signalRconveyanceId-P32-HMU-01">
                    <a href="/UnitDetails/Index/1">P32-HMU-01
                        <span class="statusicon" style="background-color: #468847"></span>
                    </a>
                </li>
                <li id="signalRconveyanceId-P32-HMU-02">
                    <a href="/UnitDetails/Index/2">P32-HMU-02
                        <span class="statusicon" style="background-color: #b94a48"></span>
                    </a>
                </li>
                <li id="signalRconveyanceId-XOS-STAGING">
                    <a href="/UnitDetails/Index/3">XOS-STAGING
                        <span class="statusicon" style="background-color: #468847"></span>
                    </a>
                </li>
                <li id="signalRconveyanceId-NWI-100">
                    <a href="/UnitDetails/Index/4">NWI-100
                        <span class="statusicon" style="background-color: #"></span>
                    </a>
                </li>
            </ul>
        </li>
    </li>
</ul>

My javascript looks like this:

var listItems = $("#unitlist li");
listItems.each(function(li) {
    console.log(li);
});

I can get the rows out of the list allright, but all I get out of them is their index number, which in this case is [0, ..., 6]. What I really need is to fetch the id-part signalRconveyanceId-XXYY for each list element. How would I be able to do that?

@NicklasWinger: The fundamental point which doesn't seem to be actually explained in the various (otherwise-correct) answers is: The first argument to the each callback is the index of the element in the jQuery set, not the element. The element is available as this, or as the second argument if you prefer. — T.J. Crowder
– T.J. Crowder, Commented Oct 4, 2013 at 8:40
Check this if you want to get just the XXYY part of the id jsfiddle.net/ZTLd5/2 — Sergio
– Sergio, Commented Oct 4, 2013 at 8:40

Rohan Kumar · Accepted Answer · 2013-10-04 08:39:35Z

8

Try to use jquery attr() like,

var listItems = $("#unitlist li");
listItems.each(function(li) {
    console.log($(this).attr('id'));
});

As your HTML shown you should select list item like

 var listItems = $("#unitlist li ul li");

Updated

var listItems = $("#unitlist li ul li");
listItems.each(function(index,li) {
    console.log(li.id);
});

Updated fiddle

edited Oct 4, 2013 at 8:39

answered Oct 4, 2013 at 8:31

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T.J. Crowder Over a year ago

$(this).attr("id") is a ridiculously long and unnecessary way to write this.id. Also, accepting the first argument of the each callback as li is misleading. It isn't the li, it's the index in the jQuery set. (Edit: Not my dv! That seems inappropriate. But it's true that your answer seems to say that the problem is that the OP isn't using attr, when in fact the problem is that the OP was using li, not this. You have to actually look at your code to see the real fix. You might want to correct that.)

Nicklas Pouey-Winger Over a year ago

Thanks for this! It works just the way I need it to.

Reinstate Monica Cellio · Accepted Answer · 2013-10-04 08:33:46Z

0

In your code li is not actually the element - it's the index. You can refer to each of the li elements using this...

var listItems = $("#unitlist li");
listItems.each(function() {
    console.log(this.id);
});

answered Oct 4, 2013 at 8:33

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Comments

lharby · Accepted Answer · 2013-10-04 08:34:13Z

0

I got this:

 var listItems = $("#unitlist li");
   listItems.each(function(li) {
   $id = $(this).attr('id');
   console.log($id);
 });

http://jsfiddle.net/lharby/cTEHY/

answered Oct 4, 2013 at 8:34

lharby

3,3376 gold badges26 silver badges67 bronze badges

Collectives™ on Stack Overflow

Loop through an unordered list using Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related