Question

我想在一个标签之后插入html，如果一个li元素有子元素，但似乎没有任何效果。以下是我的代码：

$(function() {
    $("li ul").hide();
    $("li").each(function() {
        var kids = $(this).children("ul").length;
        if (kids > 0) {
            $('<span class="">SUB</span>').insertAfter(this.closest('a'));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
</head>
<body>

<ul>
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Tea</a>
        <ul>
            <li><a href="#">Black tea</a></li>
            <li><a href="#">Green tea</a></li>
        </ul>
    </li>
    <li><a href="#">Milk</a></li>
</ul>
</body>
</html>

Answer 1

有几个问题：

您的$("li").each会访问所有 li个元素，而不仅仅是顶级元素。也许这是一个问题，也许不是，但我想我会指出它。

this

each将是原始li DOM元素，但您正在使用this.closest()（exists in modern systems}尝试找到a。但是a是后代，而不是祖先。你想要$(this).find()

在这里，我使用更具体的选择器解决了＃1（如果需要寻址），并使用$(this).find(...)作为＃2：

$(function() {
  $("li ul").hide();
  $("body > ul > li").each(function() {
    var kids = $(this).children("ul").length;
    if (kids > 0) {
      $('<span class="">SUB</span>').insertAfter($(this).find('a').first());
    }
  });
});

<ul>
  <li><a href="#">Coffee</a></li>
  <li><a href="#">Tea</a>
    <ul>
      <li><a href="#">Black tea</a></li>
      <li><a href="#">Green tea</a></li>
    </ul>
  </li>
  <li><a href="#">Milk</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

（我还删除了不应该在代码段中的元素;有关详细信息，请参阅my comment on the question。）

然而，使用jQuery的基于集合的API，我们可以使代码更简单：

$(function() {
  $("li ul").hide();
  $("li > a + ul").before(
    '<span class="">SUB</span>'
  );
});

<ul>
  <li><a href="#">Coffee</a></li>
  <li><a href="#">Tea</a>
    <ul>
      <li><a href="#">Black tea</a></li>
      <li><a href="#">Green tea</a></li>
    </ul>
  </li>
  <li><a href="#">Milk</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

当然，它将它放在a和ul之间的仅空白文本节点之后，而您的代码将它放在仅仅空白文本节点之前。如果这很重要，我们可以使用.prev("a").after(...)代替.before(...)：

$(function() {
  $("li ul").hide();
  $("li > a + ul").prev("a").after(
    '<span class="">SUB</span>'
  );
});

<ul>
  <li><a href="#">Coffee</a></li>
  <li><a href="#">Tea</a>
    <ul>
      <li><a href="#">Black tea</a></li>
      <li><a href="#">Green tea</a></li>
    </ul>
  </li>
  <li><a href="#">Milk</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

.closest()将查找树层次结构。您正在遍历li个元素，a是ul的兄弟，而不是父/子层次结构。

您可以将选择器更改为：

$("<span>SUB</span>").insertAfter($(this).children('a'));

参见演示

$(function() {
  $("li ul").hide();
  $("li").each(function() {
    var kids = $(this).children("ul").length;
    
    if (kids > 0) {
      $("<span>SUB</span>").insertAfter($(this).children('a'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
</head>

<body>

  <ul>
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Tea</a>
      <ul>
        <li><a href="#">Black tea</a></li>
        <li><a href="#">Green tea</a></li>
      </ul>
    </li>
    <li><a href="#">Milk</a></li>
  </ul>
</body>

</html>

在li标签中的元素后插入html

2 个答案: