本文详解如何在 jQuery 中正确判断目标子元素（如含指定文本的 ）是否已存在，再决定是否追加新元素，避免重复插入，并指出常见误区与最佳实践。

本文详解如何在 jquery 中正确判断目标子元素（如含指定文本的 ``）是否已存在，再决定是否追加新元素，避免重复插入，并指出常见误区与最佳实践。

在前端开发中，动态向容器添加内容时，常需确保不重复插入相同结构——例如，点击 #mii 容器时，仅当其中尚无包含文本 "foo" 的 <span></span> 元素时，才插入新的 .mii-item。你提供的代码逻辑方向正确，但关键问题在于对 jQuery 选择器返回值的理解偏差：

// ❌ 错误写法（原代码）
if ($("#mii div span:contains('foo')") == false) { ... }

jQuery 的选择器（如 $("...")）永远不会返回布尔值 false；它始终返回一个 jQuery 对象（本质是类数组对象）。即使未匹配到任何元素，该对象的 .length 为 0，但其本身为“truthy”（真值），因此 == false 永远为 false，导致条件失效。

✅ 正确做法是检查匹配结果的数量：

$(document).ready(function () {
    $("#mii").click(function() {
        // ✅ 正确：使用 .length 判断是否存在匹配元素
        if ($("#mii div span:contains('foo')").length === 0) {
            $("#mii").append("<div class="mii-item"><span>foo</span></div>");
        }
    });
});

补充说明与优化建议

• :contains() 是大小写敏感且支持子字符串匹配："foo" 会匹配 "foobar" 或 "FOO"（注意：后者因大小写敏感实际不匹配，除非 DOM 中原文为 "FOO"）。若需精确匹配整个文本内容，推荐使用 .filter() 配合 $.trim() 和严格相等：

  const exists = $("#mii div span").filter(function() {
      return $.trim($(this).text()) === "foo";
  }).length > 0;

• 性能考量：频繁调用 :contains() 在大型 DOM 中可能略慢；若元素结构固定（如所有 .mii-item 均含 <span></span>），可简化为：

  

  jQuery 1.12.4

  jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

  下载

  if ($("#mii .mii-item span").filter(function() {
      return $(this).text().includes("foo");
  }).length === 0) { ... }

• 防重复的健壮写法（推荐）：结合事件委托与唯一标识，避免因多次点击或动态插入导致的边界问题：

  $("#mii").on("click", function() {
      const $targetSpan = $(this).find("span").filter(function() {
          return $(this).text().trim() === "foo";
      });
      if ($targetSpan.length === 0) {
          $(this).append('<div class="mii-item"><span>foo</span></div>');
      }
  });

⚠️ 注意：$:contains() 属于 jQuery 扩展伪类，在原生 querySelectorAll 中不可用；若需纯 JavaScript 实现，可使用 Array.from(element.querySelectorAll('div span')).some(span => span.textContent.includes('foo'))。

掌握选择器返回值的本质（jQuery 对象而非布尔值），是避免此类逻辑陷阱的关键。始终以 .length 作为存在性判断依据，代码更可靠、可维护性更强。