Doran Wu Doran Wu - 6 months ago 24
HTML Question

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~

Answer Source

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)")