SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get all links in a UL but not in sub ULs?

    I need to get certain links found inside a UL, but I don't want the links that are contained within sub ULs. Can someone tell me how to do this?

    Code:
    var links = document.getElementsByTagName('a');
    
    <ul>
      <li>
        <a>I want these</a>
        <ul>
          <li>
            <a>I don't want these</a>
          </li>
        </ul>
      </li>
    </ul>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would suggest using XPath. This allows you to return only the ListItems within the first Unordered List.

    There is another way, but its not as clean.

    Code javascript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload = function() {
     
                    var test = document.getElementById('test');
                    var result = new Array();
                    for(var i = 0; i < test.childNodes.length; i++) {
                        if(test.childNodes[i].nodeName == 'LI') {
                            for(var c = 0; c < test.childNodes[i].childNodes.length; c++) {
                                if(test.childNodes[i].childNodes[c].nodeName == 'A')
                                    result[result.length] = test.childNodes[i].childNodes[c];
                            }
                        }
                    }
                    alert(result.length);
     
                }
            </script>
        </head>
        <body>
     
            <ul id="test">
              <li>
                <a>I want these</a>
                <ul>
                  <li>
                    <a>I don't want these</a>
                  </li>
                </ul>
              </li>
            </ul>
     
        </body>
    </html>


  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help! So if I wanted to run a function each time a top level link is moused over and off, how would I go about running it? Am I on the right track? (it doesn't work though)

    Code:
                window.onload = function() {
     
                    var test = document.getElementById('test');
                    var result = new Array();
                    for(var i = 0; i < test.childNodes.length; i++) {
                        if(test.childNodes[i].nodeName == 'LI') {
                            for(var c = 0; c < test.childNodes[i].childNodes.length; c++) {
                                if(test.childNodes[i].childNodes[c].nodeName == 'A')
                                    result[result.length] = test.childNodes[i].childNodes[c];
                            }
                        }
                    }
    		for (var j=0; j<result.length; j++) {
    			result[j].onmouseover = function() {
    				return myFunction();
    			}
    
    			result[j].onmouseout = function() {
    				return myFunction();
    			}
    		}    
                }

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See:

    Code javascript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload = function() {
     
                    var test = document.getElementById('test');
                    var result = new Array();
                    for(var i = 0; i < test.childNodes.length; i++) {
                        if(test.childNodes[i].nodeName == 'LI') {
                            for(var c = 0; c < test.childNodes[i].childNodes.length; c++) {
                                if(test.childNodes[i].childNodes[c].nodeName == 'A')
                                    result[result.length] = test.childNodes[i].childNodes[c];
                            }
                        }
                    }
                    for(var i = 0; i < result.length; i++) {
                        result[i].onmouseover = function() {
                            this.style.backgroundColor = 'red';
                        }
                        result[i].onmouseout = function() {
                            this.style.backgroundColor = '';
                        }
                    }
     
                }
            </script>
        </head>
        <body>
     
            <ul id="test">
              <li>
                <a>I want these</a>
                <ul>
                  <li>
                    <a>I don't want these</a>
                  </li>
                </ul>
              </li>
            </ul>
     
        </body>
    </html>


  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here's a nice easy way. Just check that there's less than two LI elements between the link and the top.

    Code html4strict:
    <ul id="myList">
      <li>
        <a>I want these</a>
        <ul>
          <li>
            <a>I don't want these</a>
          </li>
        </ul>
      </li>
    </ul>
    <script src="js/file.js"></script>

    Code javascript:
    var id = 'myList',
        els = document.getElementById('myList').getElementsByTagName('a'),
    	elsLen = els.length,
    	el,
    	i,
    	test,
    	listCount = 0,
    	links = [];
    for (i = 0; i < elsLen; i += 1) {
    	el = els[i];
    	test = el;
    	listCount = 0;
    	while (test && test.id !== id) {
    		test = test.parentNode;
    		if (test.nodeName === 'LI') {
    			listCount += 1;
    		}
    	}
    	if (listCount === 2) {
    		el.onmouseover = showBackground;
    		el.onmouseout = hideBackground;
    	}
    }
    function showBackground() {
    	this.style.background = 'red';
    }
    function hideBackground() {
    	this.style.background = '';
    }

    edit: It seems that gRoberts has gone for a top-down approach, where as mine is a bottom-up approach.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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