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选择器。是否有不同/更好的方法来做到这一点？

Answer 1

您可以使用next()：

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

Answer 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>

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

＆＃34;正确的方式＆＃34; （至少最简单的方法）是使用基本的CSS选择器语法：

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

或者更具体地说，这个：

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

第一个示例定位任何级别h2的后代foo，而第二个示例定位任何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>

在你的例子中没有任何此类内容。

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

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

如何在jquery链接中选择后使用多个.find（）？

6 个答案:

HTML

JS