Question

我选择使用：

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

我想只选择具有直接子li的元素ul。问题是css list-style-image也适用于没有任何孩子的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>

html中的数字4不包含任何ul但是在图像中你可以看到css已被应用：它已经获得了expand.gif而它不应该有。

Answer 1

这应该解决它：

li { list-style-image: none; }

样式list-style-image是继承的，就像color一样。如果您设置一个li的{{1}}，则其所有子项都将继承该值。通过将其设置为list-style-image，您可以将所有这些值的继承值覆盖为无，并且.css应用的内联样式会覆盖它。

Answer 2

正如@KevinB正确指出的那样，问题是CSS继承，而忽略了这一点。

您可以将嵌套<li> <ul>中的list-style-image设置为"none"以解决问题

＆＃13;

$(function() {
  $('li:has(>ul)')
  .css('list-style-image', 'url("https://lorempixel.com/50/50/cats")')
  .find("li").css("list-style-image", "none");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>here<ul><li></li></ul></li>
<li>not</li>
</ul>

＆＃13;

Answer 3

问题是:has(selector)查找与选择器匹配的任何后代。因此，如果li包含具有ul子项的嵌套元素，则它将与此匹配。

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

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

或者，您可以选择所有ul成为li的直接子女，然后转到家长以返回li。

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

Answer 4

这段代码怎么样，你不需要编码分类，它们会动态添加

$(document).ready(function() {  $('.cat').addClass('plusimageapply'); $('.cat').children().addClass('selectedimage'); $('.cat').children().hide();  $('.cat').each( function(column) {  $(this).click(function(event){  if (this == event.target) {  if($(this).is('.plusimageapply')) {  $(this).children().show();  $(this).removeClass('plusimageapply'); $(this).addClass('minusimageapply');  } else {  $(this).children().hide();  $(this).removeClass('minusimageapply'); $(this).addClass('plusimageapply');  }  }  });  } );  });

.plusimageapply{  list-style-image:url(http://icons.iconarchive.com/icons/martz90/circle-addon1/16/text-plus-icon.png); cursor:pointer; }  .minusimageapply{ list-style-image:url(http://icons.iconarchive.com/icons/gakuseisean/ivista-2/16/Alarm-Minus-icon.png); cursor:pointer; }  .selectedimage{ list-style-image:url(http://icons.iconarchive.com/icons/martz90/circle/16/google-currents-icon.png); cursor:pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tree">
 <li class="cat">1
     <ul id="tree" class="visibleChild">
        <li class="cat">9
           <ul id="tree" class="visibleChild">
              <li class="cat">4</li>
              <li class="cat">5
                 <ul id="tree" class="hiddenChild">
                    <li class="cat">7</li>
                    <li class="cat">8</li>
                    <li class="cat">18</li>
                </ul>
              </li>

Read this

jQuery只选择带有直接子元素的元素

4 个答案: