jquery find

jQuery .find() 方法

jQuery 的 .find() 方法用于在当前匹配元素的后代中查找符合条件的元素。它通过选择器、jQuery 对象或 DOM 元素来筛选后代元素。

语法

$(selector).find(filter)

• selector：初始选择的 jQuery 对象或 DOM 元素。
• filter：用于筛选后代元素的选择器、jQuery 对象或 DOM 元素。

示例

查找 <div> 内所有的 <span> 元素：

$("div").find("span").css("color", "red");

查找嵌套列表中的 <li> 元素：

$("ul").find("li").addClass("highlight");

与 .children() 的区别

• .find() 查找所有后代元素（包括嵌套多层的元素）。
• .children() 仅查找直接子元素（仅第一层后代）。

性能优化

避免过度使用通用选择器（如 *），尽量使用具体的选择器以提高性能：

// 不推荐
$("#container").find("*");

// 推荐
$("#container").find(".target-class");

链式调用

.find() 可以与其他 jQuery 方法链式调用：

$("div")
  .find("p")
  .hide()
  .fadeIn(1000);

动态查找

结合事件委托时，.find() 可用于动态添加的元素：

$("#parent").on("click", function() {
  $(this).find(".dynamic-content").toggle();
});

返回值

返回一个包含匹配元素的 jQuery 对象。若无匹配元素，返回空的 jQuery 对象。