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

Question

I am having a problem with jquery. My HTML is

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

Now I am trying to add text in span using Jquery.

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

After that it becomes,

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

But, I am tryting to achieve is,

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

How can I do that in jquery?

Answer 1

Several possible alternatives

Others have provided their answers already but let me give you some more alternatives.

$("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");

The second and last one likely being the fastest because they target particular container by ID.
^{(internal jQuery optimisations may prove me wrong with any future version)}

Performance comparison

Here's a JSPerf test that performance compares upper possibilities. As anticipated, the second and last approaches are the fastest of all because element selection is much simplified. I've tried running them on Chrome and you may run them in other browsers if you want to and see differences.

Answer 2

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

jQuery selectors are CSS selectors extended with a bit of magic. You can find everything you need to know here: http://api.jquery.com/category/selectors/

Answer 3

You need to use the :first selector to say that you only want to add text to the first element the selector finds. Try this:

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

Example fiddle

Alternatively, you can use the id of the parent div to make the selector unique:

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

Answer 4

In this example you can do what RoRyMcCrossan For general selection i recommend you to look at this : http://api.jquery.com/child-selector/

Or you can use this

http://api.jquery.com/eq-selector/

Answer 5

由于您有一个 ID，它通常在一页上是唯一的，因此最好使用以下内容：

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