如何在 jquery 链接中的选择器之后使用多个 .find()？答案

【问题标题】：How to use multiple .find() after selector in jquery chaining?如何在 jquery 链接中的选择器之后使用多个 .find()？
【发布时间】：2016-07-22 15:54:38
【问题描述】：

基本上就是标题所说的——我想知道是否有办法在同一个 jQuery 选择器上多次使用.find()。或者可能不止一次使用.find() 不是正确的做法？

这是我想要完成的：

HTML

<div id="foo">
    <h2>A Header</h2>
    <p>Some text</p>
</div>

JS

$("#foo").find("h2").html("New header");
$("#foo").find("p").html("New text");

Webstorm 抱怨重复的 jQuery 选择器。有没有其他/更好的方法来做到这一点？

【问题讨论】：

var f = $("#foo")
你可以使用.end()：$("#foo").find("h2").html("New header").end().find("p").html("New text");！

标签： javascript jquery html selector chaining

【解决方案1】：

你可以使用next():

$("#foo").find("h2").html("New header")
         .next("p").html("New Text");

【讨论】：

这可能比我的回答更简洁。据推测，jQuery 不必像我的那样从文档级别为每个元素遍历树。

【解决方案2】：

要在链中返回上一个集合，我们可以使用end()

$("#foo")
    .find("h2")
        .html("New header")
        .end()
    .find("p")
        .html("New text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
    <h2>A Header</h2>
    <p>Some text</p>
</div>

【讨论】：

【解决方案3】：

在链接中使用.find() 后，使用.addBack() 返回到第一个选择器。

$("#foo").find("h2").html("New header").addBack().find("p").html("New text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <h2>A Header</h2>
  <p>Some text</p>
</div>

【讨论】：

只需.end()，您不需要将堆栈上的前一组元素添加到当前组中：D

【解决方案4】：

“正确的方法”（至少是最简单的方法）是使用基本的 CSS 选择器语法：

$("#foo h2").html("New header");
$("#foo p").html("New text");

或者更具体地说，这个：

$("#foo>h2").html("New header");
$("#foo>p").html("New text");

第一个示例针对任意级别的foo 后代的任何h2，而第二个示例针对直接后代的任何h2。

至于尝试做这样的事情：

x = $("#foo").find("h2").find("p");

这等价于：

x = $("#foo h2 p");

（您可以通过在执行语句后进入调试并查看x.selector 来验证这一点。）这意味着您正在寻找foo 内的标题内的段落：

<div id="foo">
    <h2>A Header
        <p>**Selector would find this**</p>
    </h2>
</div>

你的例子中没有这样的。

【讨论】：

【解决方案5】：

<div id="foo">
  <h2>A Header</h2>
  <p>Some text</p>
</div>

var $foo = $("#foo");
$foo.find("h2").html("New header");
$foo.find("p").html("New text");

或者，如果可能的话：

<div id="foo">
  <h2>A Header</h2>
  <p>Some text</p>
</div>

var htmlString = '<h2>New header</h2><p>New text</p>';
$("#foo").html( htmlString );

【讨论】：

这是一个比较迂回的解决问题的方法。你的var $foo = $("#foo"); $foo.find("h2").html("New header"); 等同于$("#foo h2").html("New header");。
@BobRodes 这样使用它会缓存选定的元素。因此，每次使用$("#foo") 选择元素时，它都不需要查找元素。如果您要多次使用选择器，这样做被认为是一种很好的做法。
是的，我同意如果您要多次引用选定的元素（OP 没有提到），您应该将它存储在一个变量中。但是，将find 应用于变量会抵消缓存的优势，因为您将值附加到现有选择器并重新获取新元素。您会产生双重开销，一次是缓存父项，一次是获取后代。如果您打算利用缓存来引用同一类型的多个元素，var $foo_h2 = $("#foo h2"); var $foo_b = $("#foo b") 等会更有意义。
无论如何，我认为 Sam Coles 的回答比我们任何一个都好。 :)

【解决方案6】：

上面写着duplicated jQuery selector，因为你应该（如果可能的话）总是缓存你的jQuery选择器，因为每次你需要那个对象时调用$("#foo")是很浪费的。
所以，你的代码应该是这样的

HTML

<div id="foo">
  <h2>A Header</h2>
  <p>Some text</p>
</div>

JS

var foo = $("#foo");
foo.find("h2").html("New header");
foo.find("p").html("New text");

【讨论】：