Question

I am trying to select top level siblings using jquery. I can’t use class names which has made the task more difficult.

<ul>  
<li>  
    <a href="index.html">1</a>
    <ul>
        <li>  
            <a href="indexsub.html">sub1</a>  
        </li>
        <li>  
            <a href="indexsub2.html">sub2</a>  
        </li>
    </ul>  
</li>  
<li>  
<a href="index2.html">2</a>  
</li>
<li>  
<a href="index3.html">3</a>
</li>
</ul>​   

Following is the link to JSfiddle.

http://jsfiddle.net/KMhzy/28/

I want to change href=”#” for all tags except child list elements (i.e sub1 and sub2).

Answer 1

First, you have to change your HTML (you are missing ul inside nested menu):

<ul>
    <li>
        <a href="index.html">1</a>
        <ul>
            <li>
                <a href="indexsub.html">sub1</a>
            </li>   
        </ul>
    </li>
    <li>
        <a href="index2.html">2</a>
    </li>
    <li>
        <a href="index3.html">3</a>
    </li>
</ul>​

Next, you can achieve what you want with this:

$("ul li a").not("ul li li a").attr("href", "#");

(other solutions proposed here are hard coded to some ‘sub1’ value, this should do the trick for all submenus if that is what you want).

Here is a jsfiddle