CODEWITHSUNDEEP
jqueryjquery-selectors
Legarndary
Legarndary

Reputation: 967

Targeting <li> containing <ul> with jQuery

I'm working on a menu where i need to use jQuery to target parent elements, but I can't get the jQuery :has selector to work.

<nav>
    <div>
        <ul>
            <li>Link</li>
            <li>Link</li>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            <li>Link</li>
            <li>Link</li>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>
</nav>


$('nav > div > ul > li:has(ul)').addClass('parent');
$('nav > div > ul > li:has(ul)').click(function() {
    alert('test');
});

My fiddle is here

Upvotes: 0

Views: 149

Answers (3)

RajivRisi
RajivRisi

Reputation: 398

You need to add your submenu <ul> inside of <li> Find the demo here: http://jsfiddle.net/sYLdd/

HTML: 

<nav>
    <div>
        <ul>
            <li>Link</li>
            <li>Link
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
                </li>
            <li>Link</li>
            <li>Link
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
                </li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>
</nav>

CSS:

.parent {
    color: red;
}

jQuery:

jQuery(function() {
    jQuery('nav li').addClass('no-parent');
    jQuery('nav li:has(ul)').removeClass('no-parent').addClass('parent');
});

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

Even the simplest case of 'li:has(ul)' does not work as your ULs are not actually inside your LIs. Fix your HTML as follows:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/CTa27/2/

<nav>
    <div>
        <ul>
            <li>Link</li>
            <li>Link
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
            <li>Link</li>
            <li>Link
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>
</nav>

Upvotes: 2

Philip
Philip

Reputation: 395

I am not sure why you want to use jQuery to target the ul, Maybe you can just add your class to the ul.

<ul class="parent"></ul>

Upvotes: -1

Related Questions