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

【问题标题】：How do I add text to specific div element using jQuery?如何使用 jQuery 将文本添加到特定的 div 元素？
【发布时间】：2020-12-28 09:40:27
【问题描述】：

我在使用 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 中做到这一点？

【问题讨论】：

@RobertKoritnik 正如他所说他的代码有效，我假设他使用var $j = jQuery.noConflict();创建了一个新的jQuery别名

标签： javascript jquery html

【解决方案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 test，它的性能比较了较高的可能性。正如预期的那样，第二种也是最后一种方法是最快的，因为元素选择非常简单。我已经尝试在 Chrome 上运行它们，如果您想查看差异，您可以在其他浏览器中运行它们。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您需要使用:first 选择器表示您只想将文本添加到选择器找到的第一个元素。试试这个：

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

Example fiddle

或者，您可以使用父 div 的 id 使选择器唯一：

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

【讨论】：

我没有 donwnvote 但:first 选择器过滤器匹配作为其父母的第一个孩子的所有元素，这意味着所有test div 仍然匹配......所以你的第一个解决方案当然是无效的。可以$("span.test").first()...
@RobertKoritnik 你把:first 和:first-child 混在一起了。 :first 选择匹配集合的第一个元素。
@RoryMcCrossan：你是对的......我的错......但正如我所提到的，我没有投票，所以我无法删除它。
@RobertKoritnik 别担心，没问题 :)
嗯，如果 jQuery 的 OP 看起来不是很新，我就不会这么固执了。我在想象正在编写各种可怕的代码:)

【解决方案4】：

在这个例子中你可以做 RoRyMcCrossan 对于一般选择，我建议您查看此：http://api.jquery.com/child-selector/

或者你可以使用这个

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

【讨论】：

【解决方案5】：

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

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

【讨论】：