CODEWITHSUNDEEP
jqueryhtmljquery-selectors
Doran Wu
Doran Wu

Reputation: 97

How to select <li> in nested list

Is there a simple selector expression to not select elements with a specific class?

I want a hover event when hover <li> which contain <small> tag.

Js code:

 $("sidebar-menu li:not(.header)").hover(function () {
    $('.sidebar-menu li a small').show();
}, function () {
    $('.sidebar-menu li a small').hide();
});

HTML code:

<ul class="sidebar-menu">
                <li class="header la-one">My Page</li><li><a href=""><i class="fa fa-circle-o text-info"></i> <span>Cook<small class="label pull-right bg-yellow" onclick="javascript:window.location.href='https://www.example.com/';" return="" false;'="">-</small></span></li>
    <li class="treeview">
        <a href="#">
            <i class="fa fa-folder"></i> <span>Other</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
        <li><i class="fa fa-circle-o"></i>Service<small class="label pull-right bg-green " onclick="javascript:window.location.href='https://www.exaple.com/'; return false;">+</small></li>
        <li><i class="fa fa-circle-o"></i>Enroll<small class="label pull-right bg-green " onclick="javascript:window.location.href='https://www.exaple.tw/'; return false;">+</small></li>

        <li><a href=""><i class="fa fa-circle-o"></i>Portal Ask<small class="label pull-right bg-green " onclick="javascript:window.location.href='https://www.exaple.tw/'; return false;">+</small></a></li>
        </ul>
     </li></ul>

UPDATE $("sidebar-menu li:not(.'header')") to $("sidebar-menu li:not(.header)") still trigger event when I hover <li class="treeview"> and <li class="header la-one">.

How can I set the selector which li has <small> tag not the others? THX~

Upvotes: 0

Views: 668

Answers (3)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

You have a syntax error on onclick line you can notice it here with the red color

<li class="header la-one">My Page</li><li><a href=""><i class="fa fa-circle-o text-info"></i> <span>Cook<small class="label pull-right bg-yellow" onclick="javascript:window.location.href='https://www.yzu.edu.tw/';" return="" false;'="">

As I pointed in comment

$(".sidebar-menu li:not(.header)")

add . before the sidebar-menu class and use not class like this :not(.header)

I recommend to read about selectors Here

Working demo

and you can use :has(small) as well

$(".sidebar-menu li:has(small)")

Upvotes: 2

nyedidikeke
nyedidikeke

Reputation: 7618

Heads up!

The error is here: $(".sidebar-menu li:not(.'header')") (the single quotes around the header selector).

You should simply use $(".sidebar-menu li:not(.header)") (without any quote around the header selector just as pointed in the comment below your post).

Based on your update, this is what you need:

$('.sidebar-menu').find('li:not(.header)').hover(function(){
    console.log('hovered');
    // run your function here (example: $('.sidebar-menu li a small').show();)
});

Upvotes: 1

Rajalakshmi P
Rajalakshmi P

Reputation: 63

To select elements with specific child elements :has selector can be used as given in http://api.jquery.com/has-selector/ & :not for selecting elements without a class.

$('li:has(span)').hover(function(){
    // Your hover function
}

Upvotes: 0

Related Questions