时间戳

首页 > 解决方案 > 在 li 标签中的元素之后插入 html

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

问题描述

如果 li 元素有子元素但似乎没有任何效果，我正在尝试在 a 标记之后插入 html。下面是我的代码：

$(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>

标签： jqueryhtml

解决方案

几个问题：

  • 您$("li").each将访问所有 li元素，而不仅仅是顶级元素。也许这是一个问题，也许不是，但我想我会指出这一点。
  • this在您的each回调中将是原始liDOM 元素，但您随后使用this.closest()（存在于现代系统中）试图找到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>

（我还删除了不应出现在片段中的元素；有关详细信息，请参阅我对问题的评论。）

但是，使用 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>

推荐阅读