我如何使用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优化可能证明我的任何未来版本都有问题)}

性能比较

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

Answer 2

$('#first span.test').text('Welcome');

jQuery 选择器是用一些魔法扩展的 CSS 选择器。你可以在这里找到你需要知道的一切：http : //api.jquery.com/category/selectors/