how to find all li id's in specific UL?

[Amit Prakash Pawar]

I want to find all li id's from UL id "ul2" which is in div
id="divTopLeft".
How to do this?

<div id="divTopLeft" class="workarea" >
<ul id="ul2" class="draglist">
<li id="li1_2" class="list1">
PR 3
<input id="draglist_directory_submissionPR3" type="hidden"
value="13" name="draglist_directory_submissionPR3"/>
</li>
<li id="li1_1" class="list1" style="">
<input id="draglist_directoryPR3" type="hidden" value="10"
name="draglist_directoryPR3"/>
</li>
<li id="li3_3" class="list3" style="">
<input id="draglist_submissionPR3" type="hidden" value="20"
name="draglist_submissionPR3"/>
</li>
</ul>
</div>
<div id="divTopRight" class="workarea">
<ul>
<li id="li6_1" class="list6" style="">Rp
<input id="draglist_PR3" type="hidden" value="15"
name="draglist_PR3"/>
</li>
<li id="li7_2" class="list6" style="">Rp1
<input id="draglist2_PR3" type="hidden" value="13"
name="draglist2_PR3"/>
</li>
<li id="li8_3" class="list6" style="">Rp2
<input id="draglist2_PR31" type="hidden" value="12"
name="draglist2_PR31"/>
</li>
</ul>
</div>

 

[RobG]

I want to find all li id's from UL id "ul2" which is in div
id="divTopLeft".
How to do this?

        <div id="divTopLeft" class="workarea" >
                <ul id="ul2" class="draglist">
                        <li id="li1_2" class="list1">
                        PR 3
                                <input id="draglist_directory_submissionPR3" type="hidden"
value="13" name="draglist_directory_submissionPR3"/>
                        </li>
                        <li id="li1_1" class="list1" style="">
                                <input id="draglist_directoryPR3" type="hidden" value="10"
name="draglist_directoryPR3"/>
                        </li>
                        <li id="li3_3" class="list3" style="">
                                <input id="draglist_submissionPR3" type="hidden" value="20"
name="draglist_submissionPR3"/>
                        </li>
                </ul>
        </div>
        <div id="divTopRight" class="workarea">
                <ul>
                        <li id="li6_1" class="list6" style="">Rp
                                <input id="draglist_PR3" type="hidden" value="15"
name="draglist_PR3"/>
                        </li>
                        <li id="li7_2" class="list6" style="">Rp1
                                <input id="draglist2_PR3" type="hidden" value="13"
name="draglist2_PR3"/>
                        </li>
                        <li id="li8_3" class="list6" style="">Rp2
                                <input id="draglist2_PR31" type="hidden" value="12"
name="draglist2_PR31"/>
                        </li>
                </ul>
        </div>

Use document.getElementById to get a reference to the UL, use
UL.getElementsByTagName to get a collection of the LI elements, loop
over them and collect the id's of the members of that collection that
have them.

Untested:

var ids = [];
var ul = document.getElementById('ul2');
var lis = ul.getElementsByTagName('li');
var li;
for (var i=0, iLen=lis.length; i<iLen; i++){
li = lis;
if (li.id) {
ids.push(li.id);
}
}
alert(ids);

 

[abozhilov]

Another way with document.evaluate:

function getLiId(root_id, callback)
{
var d = document,
root_ul = d.getElementById(root_id),
o_list;
if (d.evaluate)
{
o_list = d.evaluate(
'.//li[@id]',
root_ul,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE ,
null
);
for (var i = 0, len = o_list.snapshotLength; i < len; i++)
{
callback(o_list.snapshotItem(i));
}
}
}

And with querySelectorAll:

function getLiId(root_id, callback)
{
var d = document,
root_ul = d.getElementById(root_id),
o_list;
if (root_ul.querySelectorAll)
{
o_list = root_ul.querySelectorAll('li[id]');
for (var i = 0, len = o_list.length; i < len; i++)
{
callback(o_list);
}
}
}