CODEWITHSUNDEEP
jquery
Aditya T
Aditya T

Reputation: 147

jQuery Selection

<div class="menu">
<ul>
<li><a href="#" target="_self" >Acme Inc.</a>
    <ul>
    <li><a href="#" target="_self">Christa Woods</a></li>
    <li><a href="#" target="_self">Charlotte Freeman</a></li>
    <li><a href="#" target="_self">Jeffrey Walton </a></li>
    <li><a href="#" target="_self">Ella Hubbard</a></li>
    <li><a href="#" target="_self">Sean Fletcher</a></li>
    </ul>
</li>
<li><a href="#" target="_self" >Widget Corp.</a>
    <ul>
    <li><a href="#" target="_self">Dylan Mack</a></li>
    <li><a href="#" target="_self">Roseanne Goodman</a></li>
    <li><a href="#" target="_self">Pedro Rivera</a></li>
    <li><a href="#" target="_self">Marion Cole</a></li>
    </ul>
</li>
<li><a href="#" target="_self" >Vendor LLC</a>
    <ul>
    <li><a href="#" target="_self">Hannah Moon</a></li>
    <li><a href="#" target="_self">Eduardo Vasquez</a></li>
    </ul>
</li>
</ul>
</div>

How do I select just the "Acme Inc", "Widget Corp" and "Vendor LLC" links - without selecting the sub li links. Basically I want to stop the header links from doing their default action.

Upvotes: 1

Views: 336

Answers (3)

wdm
wdm

Reputation: 7189

$('.menu > ul > li > a').click(function(e) {
    e.preventDefault();
});

Upvotes: 1

Pekka
Pekka

Reputation: 449435

Use the immediate child selector:

$('.menu > ul > li > a')

Alternatively, as pointed out by @regilero, the .children() method does the same thing, and even is a bit more clear about what it does.

Upvotes: 7

Jason Yost
Jason Yost

Reputation: 4937

You should set a class property on the links and select them in that way

<a class="hlink"></a>

$('.hlink').click(function(){
 modify click action here
});

Upvotes: 2

Related Questions