仅选择有子元素的元素的问题

Question

您能否请一看这个演示，让我知道为什么代码将T添加到子<i class="red"> + </i>下的所有<li>。我想要做的只是将<ul>添加到+（s），其中包含一组新的<li>，但您可以看到它正在添加给所有孩子

<ul>

 $(function() {
   $('li:has(ul)').find('span').append('<i class="red"> + </i>');
  });

.red{color:red;}

Answer 1

使用后代>选择器：

$(function() {
  $('body > ul > li:has(ul)').find('> span').append('<i class="red"> + </i>');
});

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><span>Item 1</span></li>
  <li><span>Item 2</span>
    <ul>
      <li><span>Item 2-1</span></li>
      <li><span>Item 2-2</span></li>
      <li><span>Item 2-3</span></li>
      <li><span>Item 2-4</span></li>
    </ul>
  </li>
  <li><span>Item 3</span></li>
  <li><span>Item 4</span></li>
</ul>

预览

Answer 2

这是因为.find正在查找作为li元素后代的所有span元素。如说明here

中所述

您正在寻找以下解决方案

$(function() {
  $('li:has(ul)').children('span').append('<i class="red"> + </i>');
});

其中仅针对li元素的子元素 Demo here