jQuery iterate nested html list

Question

I have a HTML code of nested list giving me a hard time to read with jQuery!

I'm using

$.get();

to get the html then using

$(data).find(".thelist ul");

To get the list only which looks like

<ul> 
    <li><a href="Draft-Documents-Page_294813708.html">Draft Page</a>
        <ul>
            <li><a href="Batch-Closing-Version-3.7_295567410.html">Batch Version 7</a></li>
        </ul>
    </li>

    <li><a href="Infection-Prevention-and-Control-System_491532.html">info Control System</a>
        <ul>
            <li><a href="About-info_261488773.html">About info</a></li>
        </ul>



        <ul>
            <li><a href="Applicati.html">Application</a>
                <ul>
                    <li><a href="Functionality.html">Functionality</a>

                        <ul>
                            <li>
                                <a href="Access.html">Access</a>
                            </li>
                        </ul>
                        <ul>
                            <li><a href="Login.html">Login</a>
                            </li>
                        </ul>
                        <ul>
                            <li><a href="info.html">info Desktop</a>
                            </li>
                        </ul>
                        <ul>
                            <li><a href="Search.html">Search</a>
                            </li>
                        </ul>
                        <ul>
                            <li><a href="info-Mobile.html">info Mobile</a>
                            </li>
                        </ul>

                    </li>
                </ul>
                </li>
        </ul>

            <ul>
                <li><a href="info.html">Support</a></li>
            </ul>
            <ul>
                <li><a href="Technical.html">Technical Manual</a>

                    <ul>
                        <li><a href="Formatting.html">Formatting</a>
                        </li>
                    </ul>
                    <ul>
                        <li><a href="Troubleshooting.html">Troubleshooting</a></li>
                    </ul>
                </li>
            </ul>
    </li>
</ul>

The actual list is more than 200 item! and it can go up to 7 levels!

What im getting is every item that has children the text is including all of their text!.

I need to get the text and the link of each then append or generate my own list with same level but different html structure

Is this the best approach ?

I have tried iterating using $each()

you need the links and their titles only?

Saeed
– Saeed

2018-04-19 06:00:40 +00:00
Commented Apr 19, 2018 at 6:00 — Saeed
– Saeed, Commented Apr 19, 2018 at 6:00
Yes (12 more to go)

et3rnal
– et3rnal

2018-04-19 06:26:20 +00:00
Commented Apr 19, 2018 at 6:26 — et3rnal
– et3rnal, Commented Apr 19, 2018 at 6:26

Anfath Hifans · Accepted Answer · 2018-04-19 07:19:50Z

3

try this it will give all titles with links.

$(function(){
    var links = [];
    $( "ul" ).find( "a" ).each(function(k,v){
        links.push({ title : $(v).text(), link : $(v).attr('href'), level : $(v).parents('ul').length });
    });
    console.log(links);
});

edited Apr 19, 2018 at 7:19

answered Apr 19, 2018 at 6:46

Anfath Hifans

1,5981 gold badge12 silver badges20 bronze badges

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

3 Comments

et3rnal Over a year ago

This is great thanks! Now I just can't find way to keep track of keeping the level of each item

Anfath Hifans Over a year ago

@et3rnal, check it now.

et3rnal Over a year ago

Awesome! I used v.nextSibling to check :D

Yatin · Accepted Answer · 2018-04-19 06:44:19Z

0

Assuming the <ul> you've shown above is the one inside the .thelist block.

I think it'll be easier if you just use $(data).find(".thelist ul li") to get all the list items inside the <ul> element (and subelements).

Or, if you want to go down just one level, you can do $(data).find(".thelist ul>li").

And, you can use the following method to avoid selecting children nodes:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

I got this removing children idea from here.

I hope this helps.

edited Apr 19, 2018 at 6:44

answered Apr 19, 2018 at 6:38

Yatin

1,19811 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery iterate nested html list

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related