javascript - 如何使用 jQuery 将文本添加到特定的 div 元素？

Question

我在使用 jquery 时遇到了问题。我的 HTML 是

<div id="first">
   <span class="test"></span>
</div>
<div id="second">
   <span class="test"></span>
<div> 

现在我正在尝试使用 Jquery 在 span 中添加文本。

$j('span.test').text('Welcome');

之后就变成了

<div id="first">
    <span class="test">Welcome</span>
</div>
<div id="second">
    <span class="test">Welcome</span>
<div> 

但是，我正在努力实现的是，

<div id="first">
    <span class="test">Welcome</span>
</div>
<div id="second">
    <span class="test"></span>
<div>

我如何在 jquery 中做到这一点？

Answer 1

几种可能的选择

其他人已经提供了他们的答案，但让我给你更多的选择。

$("span.test:first").text("Welcome");
$("#first span.test").text("Welcome");
$("span.test").first().text("Welcome");
$("span.test").eq(0).text("Welcome");
$("span.test", "#first").text("Welcome");

第二个也是最后一个可能是最快的，因为它们按 ID 定位特定容器。
^{(内部 jQuery 优化可能会证明我对任何 future 版本都是错误的)}

性能比较

这是一个 JSPerf test该性能比较了更高的可能性。正如预期的那样，第二种和最后一种方法是所有方法中最快的，因为元素选择大大简化了。我已经尝试在 Chrome 上运行它们，如果您愿意，您可以在其他浏览器中运行它们并查看差异。