www.webdeveloper.com
Results 1 to 3 of 3

Thread: traverse through <ul> <li> tree in jquery

  1. #1
    Join Date
    Aug 2013
    Posts
    1

    traverse through <ul> <li> tree in jquery

    how can I traverse through all ul and li elements in a tree structure :

    <ul>
    <li><a href="#">Places</a>
    <ul>
    <li><a href="#">Mercury</a></li>
    <li><a href="#">Venus</a></li>
    <li><a href="#">Earth</a></li>
    </ul>
    </li>

    <li><a href="#">Google</a>
    <ul>
    <li><a href="#">Search</a></li>
    <li><a href="#">News</a></li>
    </ul>
    </li>
    .
    .
    .
    </ul>

    I want to get all values in ul and li tags in java script.

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    In jQuery, you can do

    Code:
    $('li').each(function () {
        // process LI element here
        // $(this)    <- this is the li element
    });

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    An essay without jQuery
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <meta name="generator" content="PSPad editor, www.pspad.com">
            <title>
            </title>
            <style type="text/css">
            </style>
        </head>
        <body>
    <div id="pge">    
            <ul>
                <li>
                <a href="#">Places</a>
                <ul>
                    <li>
                    <a href="#">Mercury</a>
                    </li>
                    <li>
                    <a href="#">Venus</a>
                    </li>
                    <li>
                    <a href="#">Earth</a>
                    </li>
                </ul>
                </li>
                <li>
                <a href="#">Google</a>
                <ul>
                    <li>
                    <a href="#">Search</a>
                    </li>
                    <li>
                    <a href="#">News</a>
                    </li>
                </ul>
                </li>
            </ul>
    </div>        
    <script type="text/javascript">
    var cnt=document.getElementById('pge').innerHTML.replace(/(<\/?a[^>]*>|\s+)/gi,'');//alert(cnt)
    var arrObj=[],tmp,obj;
    cnt.replace(/<li>([^<]+)(<ul>|<\/li>)/gi,function(all,field,tag){
        if (tag.toLowerCase()!='</li>') {
            tmp=field;
            obj={};
            obj[field]=[];
            arrObj[arrObj.length]=obj;}
        else obj[tmp][obj[tmp].length]=field;
    })
    
    alert(JSON.stringify(arrObj))
    </script>
        </body>
    </html>
    and with a simple code...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles