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

Question

基本上就是标题所说的 - 我想知道是否有办法在同一个 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 选择器。有 different/better 的方法吗？

Answer 1

<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 );

Answer 2

"right way"（至少是最简单的方法）是使用基本的 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 中的 header 中查找段落:

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

而您的示例中没有任何此类内容。

Answer 3

它说 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");

Answer 4

在链接中使用 .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>

Answer 5

您可以使用 next():

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

Answer 6

要返回链接中的上一个集合，我们可以使用 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>

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

How to use multiple .find() after selector in jquery chaining?

html

javascript

jquery

selector

chaining

HTML

JS