無法使用子選擇器定位特定的LI元素

Question

我只是不知道我在做什么錯。

 $('ul.list > li:not(.sublist)').click(function() { alert("working now"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li>One</li> <li class="special">Two</li> <li>Three</li> <li> <ul class="sublist"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul> 

我試圖僅選擇從class（.list）繼承的LI元素。 當我單擊時，class（.sublist）的子級也總是被激活。單擊的所有內容都會給我警報。 這不是我想要的。 我很沮喪，因為我知道答案很簡單，但我無法弄清楚。

我也嘗試過使用這個：

$('ul.list li').not('.sublist').click(function(){
    alert('working');
});

Answer 1

使用直接子級組合器> ，以便僅選擇直接子級元素：

ul.list > li

但是，由於這仍然會選擇包含.sublist元素的li ，因此.sublist使用:not() / :has()選擇器的組合：

$('ul.list > li:not(:has(.sublist))').on('click', function () {
    // ...
});

這里的例子

 $('ul.list > li:not(:has(.sublist))').on('click', function () { alert('working'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li>One</li> <li class="special">Two</li> <li>Three</li> <li> <ul class="sublist"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul>