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

Question

您能否看一下这个演示，并让我知道为什么代码添加 <i class="red"> + </i>致所有人 <li>在 child 下面<ul> 。我想做的只是添加 +至<li> (s) 其中包含一组新的 <ul>但正如你所看到的，它正在添加到所有 child 中

 $(function() {
   $('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 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>

预览