使用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?

Answer 1

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

Answer 2

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);
});

Answer 3

I got this:

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

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