jquery 判断一个元素是否包含一个元素

admin 2026年03月29日 07:31 103 0

在jQuery中，判断一个元素是否包含另一个元素，常用has()方法或find()结合length判断，has()方法用于筛选包含指定后代元素的集合，如$('parent').has('child')返回包含child的parent元素，若需返回布尔值，可通过$('parent').find('child').length > 0实现，当length大于0时表示包含，两种方法均能高效判断元素包含关系，前者直接返回符合条件的元素集合，后者通过查找子元素的数量判断，适用于需要明确布尔值的场景。

jQuery 中判断元素包含关系的实用方法详解

在网页开发中,操作 DOM 是常见需求，而判断一个元素是否包含另一个元素（即是否存在父子或后代关系）是 DOM 操作的重要基础，无论是动态渲染列表时判断某个子元素是否存在，还是在事件委托中判断触发事件的元素是否包含特定目标元素，这类操作都频繁出现在实际项目中，jQuery 作为经典的 DOM 操作库，提供了多种便捷的方法来实现这一功能，本文将详细介绍几种常用方法，并通过丰富的示例代码和实际应用场景，帮助读者深入理解并灵活运用这些技术。

核心方法：`has()` —— 专为"包含关系"设计的筛选方法

jQuery 的 has() 方法是专门用于筛选包含指定后代元素的集合，返回一个新的 jQuery 对象，其核心语法如下：

$(selector).has(targetSelector)

参数说明

selector：父元素的选择器（可以是字符串、jQuery 对象或 DOM 元素）。
targetSelector：要查找的后代元素，可以是选择器字符串、jQuery 对象或 DOM 元素。

示例代码

假设有以下 HTML 结构：

<div id="parent">
  <p>段落1</p>
  <span class="child">子元素</span>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>
<div id="other">其他元素</div>

使用选择器判断

判断 #parent 是否包含 class="child" 的元素：

const hasChild = $('#parent').has('.child');
console.log(hasChild.length > 0); // 输出：true（包含）

使用 jQuery 对象判断

判断 #parent 是否包含 <ul> 元素：

const $ul = $('ul');
const hasUl = $('#parent').has($ul);
console.log(hasUl.length > 0); // 输出：true（包含）

使用 DOM 元素判断

const liElement = document.querySelector('li');
const hasLi = $('#parent').has(liElement);
console.log(hasLi.length > 0); // 输出：true（包含）

特点与注意事项

has() 方法返回的是包含目标元素的父元素集合，因此可以通过 length 属性判断是否存在（length > 0 表示存在）。
语义清晰,直接表达"包含"关系，代码可读性高。
has() 方法只会返回直接包含目标元素的父元素，而不会返回更上层的祖先元素。
在性能方面,has() 方法经过 jQuery 优化，对于大型 DOM 结构也能保持较好的性能。

实际应用场景

has() 方法在实际开发中有多种应用场景：

// 示例1：检查表单中是否包含必填字段
function checkRequiredFields(formSelector) {
  const $form = $(formSelector);
  const requiredFields = $form.has('[required]');
  if (requiredFields.length === 0) {
    console.warn('表单中没有必填字段');
  }
  return requiredFields;
}
// 示例2：动态菜单高亮当前项
function highlightMenuItem(menuSelector, currentPath) {
  $(menuSelector).find('a').each(function() {
    if ($(this).attr('href') === currentPath) {
      // 找到包含当前路径的菜单项
      const $menuItem = $(this).closest('li');
      $menuItem.addClass('active');
      // 如果有父级菜单，也展开
      $menuItem.parents('.submenu').show();
    }
  });
}

替代方法：`find()` + `length` —— 通过查找后代元素判断

除了 has()，还可以通过 find() 方法查找后代元素，再结合 length 属性判断是否存在，其核心逻辑是：如果父元素的 find() 能找到目标后代元素，则 length 大于 0，表示包含。

语法

$(parentSelector).find(childSelector).length > 0

示例代码

继续使用上面的 HTML 结构，判断 #parent 是否包含 <p> 元素：

const hasP = $('#parent').find('p').length > 0;
console.log(hasP); // 输出：true（包含）
// 判断是否包含 class="no-exist" 的元素
const hasNoExist = $('#parent').find('.no-exist').length > 0;
console.log(hasNoExist); // 输出：false（不包含）

特点与适用场景

find() 方法会递归查找所有后代元素（子元素、孙元素等），与 has() 逻辑一致。
需要通过 length 属性手动判断是否存在，代码稍显冗长，但适合需要进一步操作找到的元素时（如 $('#parent').find('p').text()）。
当需要获取并操作子元素时,使用 find() 方法可以避免额外的查询，提高代码效率。

性能考虑

虽然 find() 和 has() 在功能上可以相互替代，但在某些情况下，它们的性能表现会有所不同：

// 性能测试示例
const $parent = $('#parent');
const iterations = 10000;
console.time('has method');
for (let i = 0; i < iterations; i++) {
  $parent.has('.child');
}
console.timeEnd('has method');
console.time('find method');
for (let i = 0; i < iterations; i++) {
  $parent.find('.child').length > 0;
}
console.timeEnd('find method');

在大多数情况下,两种方法的性能差异不大，但当 DOM 结构复杂或选择器较复杂时，has() 方法可能会有轻微的性能优势。

原生 DOM 方法：`contains()` —— 无 jQuery 时的备选方案

如果项目中未使用 jQuery，或需要混合使用原生 JS 和 jQuery，可以利用 DOM 原生的 contains() 方法，该方法返回一个布尔值，表示指定节点是否是另一个节点的后代。

语法

parentNode.contains(childNode)

参数说明

parentNode：父节点（DOM 元素）。
childNode：子节点（DOM 元素）。

示例代码

const parent = document.getElementById('parent');
const child = document.querySelector('.child');
const other = document.getElementById('other');
console.log(parent.contains(child)); // 输出：true（parent 包含 child）
console.log(parent.contains(other)); // 输出：false（parent 不包含 other）

与 jQuery 方法的区别

contains() 是原生 DOM 方法，直接返回布尔值，无需通过 length 判断。
使用时需要将 jQuery 对象转换为 DOM 元素（如 $('#parent')[0]）。
contains() 方法不支持选择器字符串，必须直接传入 DOM 元素。

浏览器兼容性

contains() 方法在现代浏览器中得到广泛支持，但在一些旧版本浏览器中可能存在兼容性问题，如果需要支持这些浏览器，可以使用以下 polyfill：

// contains() 方法 polyfill
if (!document.documentElement.contains) {
  document.documentElement.contains = function contains(node) {
    if (this === node) {
      return true;
    }
    while (node && (node = node.parentNode)) {
      if (this === node) {
        return true;
      }
    }

标签： #元素包含 #判断元素