Javascript jQuery仅选择具有直接子级的元素

我选择使用：

$('li:has(>ul)').css('list-style-image', 'url("../images/expand.gif")');// put icon +

我只想选择具有直接子级的元素

li

。 问题是css列表样式的图像也适用于没有任何子级的

li

<ul id="tree">
 <li class="opened" style="list-style-image: url(&quot;../images/expand.gif&quot;);">1
     <ul id="tree" class="visibleChild">
        <li class="opened" style="list-style-image: url(&quot;../images/expand.gif&quot;);">9
           <ul id="tree" class="visibleChild">
              <li class="opened">4</li>
              <li class="closed" style="list-style-image: url(&quot;../images/expand.gif&quot;);">5
                 <ul id="tree" class="hiddenChild">
                    <li class="closed">7</li><li class="closed">8</li>
                    <li class="closed">18</li>
                </ul>
              </li>

1

9

4
5

7
18

---

HTML中的4号不包含任何UL，但在图像中可以看到CSS的应用：它有扩展名。GIF不应该有它。 您可以将嵌套的

列表样式图像中的
设置为
“无”
，以解决问题


$（函数（）{
$（'li:has（>ul'））
.css（'list-style-image'，'url（'https://lorempixel.com/50/50/cats")')
.find（“li”）.css（“列表样式图像”，“无”）；
})


这里是
不是
问题在于
：has（选择器）
查找与选择器匹配的任何后代。因此，如果
li
包含一个嵌套元素，该元素具有
ul
子元素，那么它将与此匹配

相反，找到所有的
ul
，然后选择他们的父母是
li

$('ul').parent('li').css('list-style-image', 'url("../images/expand.gif")');

$('li > ul').parent().css('list-style-image', 'url("../images/expand.gif")');

或者，您可以选择属于
li
的直接子级的所有
ul
，然后转到父级返回
li

$('ul').parent('li').css('list-style-image', 'url("../images/expand.gif")');

$('li > ul').parent().css('list-style-image', 'url("../images/expand.gif")');

这应该可以解决这个问题：

li { list-style-image: none; }

样式是继承的，很像
color
is。如果设置一个
li
的
列表样式图像
，则其所有子项都将继承该值。通过将其设置为
none
，您可以将它们的继承值全部覆盖为none，而您的内联样式由.css覆盖。
如何处理此代码，您不需要对其进行代码分类，它们将被动态添加


$（document）.ready（函数（）{$（'.cat'）.addClass（'plusimageapply'）；$（'.cat'）.children（）.addClass（'selectedimage'）；$（'.cat'）.children（）.hide（）；$（'.cat'）。each（函数（列）{$（this）。单击（函数（事件）{if（this==event.target）{if（$（this）。is（'.plusimageapply'））{$（this）。children this（）.children（）.show（））；$（this）。removeClass）（'plusimageapply'）；$（this.addClass（'minusimageapply'）；}else{$（this.children（）.hide（）；$（this.removeClass（'minusimageapply'）；$（this.addClass（'plusimageapply'）；}}）；}）；
.plusimageapply{列表样式图像：url(http://icons.iconarchive.com/icons/martz90/circle-addon1/16/text-plus-icon.png)；游标：指针；}.minusimageapply{列表样式图像：url(http://icons.iconarchive.com/icons/gakuseisean/ivista-2/16/Alarm-Minus-icon.png)；光标：指针；}。选择图像{列表样式图像：url(http://icons.iconarchive.com/icons/martz90/circle/16/google-currents-icon.png)；光标：指针；}


1

9

4
5

7
8
18

发布相关的html。@gabykag.Petrioli添加了html
li{list style image:none；}
太棒了，它可以工作了！为什么？它是一个bug？或者它只是在做它声明的事情。@KevinB你是说
$（“li:has（ul）”
还是
$（“li:has（>ul）”
应该并且旨在匹配
？其中文档中的描述是“选择至少包含一个与指定选择器匹配的元素的元素”。给出的示例代码是“表达式
$（“div:has（p）”）
匹配一个
，如果
存在于其子代中的任何位置，而不仅仅是直接子代。”你是如何得出这样的结论的？不，我是说你在错误地解释你的结果。@KevinB你的意思是因为父级
应用了
列表样式图像
而子级
元素也应用了CSS吗？列表样式图像属性是继承的，将其设置在pa上rent li还将其设置为子元素。颜色也是继承的。请参见我的示例。css仅适用于正确的li，而不是所有的子元素？使用inspect元素，查看哪些元素具有样式属性。选择器实际上是正确的，问题与css更相关。