使用jQuery选择* don * t *包含链接的列表项

Question

尝试为我的ul中不包含链接的所有元素添加背景颜色

HTML：

  <ul id="list">
    <li><a href="http://google.com/">Google</a></li>
    <li><a href="http://yahoo.com/">Yahoo</a></li>
    <li>Not a link</li>
    <li><a href="http://live.com/">Live</a></li>
    <li>Not a link</li>
  </ul>

使用Javascript：

  $('#list li').css({'background': 'red'});

但这改变了所有这些 - http://jsbin.com/pusogihuvi/1/edit?html,js,output

Answer 1

使用:not伪选择器排除匹配项。使用:has伪选择器查看元素是否包含指定的匹配（不会丢失祖先范围）。

$('#list li:not(:has(a))').css({'background': 'red'});

Answer 2

您可以合并:not和:has：

$('#list > li:not(:has(a))').css({'background': 'red'});

http://jsbin.com/quyalunipo/1/edit?html,css,js,output