jQuery .append() 仅在第一个元素上答案

【问题标题】：jQuery .append() only on first elementjQuery .append() 仅在第一个元素上
【发布时间】：2017-06-03 18:23:34
【问题描述】：

<div class="append-something first"></div>
<div class="append-something second"></div>
<div class="append-something third"></div>

$("#trigger").click(function() {
 $(".append-something").append("Some Stuff");
});

你好，我希望上面的代码将单词“Some Stuff”粘贴/附加到div-class“append-something”中，但只粘贴到第一个带有类名的div中。（在我的代码中，单词应该附加到“first”，而不是“second”或“third”）。非常感谢！

【问题讨论】：

$(".append-something:first()").append("Some Stuff"); 或 $(".append-something").first().append("Some Stuff");
And look this link for first div element

标签： jquery html css append

【解决方案1】：

您可以使用:first 或:first-child 选择器。只有最后一个你应该使用:last 选择器。

对于任何其他元素，您可以使用该元素的索引。 jQuery 将创建一个包含他使用append-something 类找到的所有元素的数组。所以第一个元素将是0 的索引。

$("#trigger-first").click(function() {
// ":first" and ":first-child" will work.
    $(".append-something:first").append("Some Stuff");
});

$("#trigger-last").click(function() {
// ":last" for last option.
    $(".append-something:last").append("Some Stuff");
});

$("#trigger-second").click(function() {
// It will return an array of item so you can request on index.
    $($(".append-something")[1]).append("Some Stuff");
});

玩它：https://jsfiddle.net/9bfskesb/

【讨论】：

【解决方案2】：

您可以使用first selector:

 $(".append-something:first").append("Some Stuff");

【讨论】：

【解决方案3】：

You Can use prependTo() method

$("&lt;span&gt;Hello World!&lt;/span&gt;").prependTo(".inner:first-child");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

【讨论】：

【解决方案4】：

使用 $(".append-something:first").append("Some Stuff"); 或者如果你有 .first 类，那么只需 $(".append-something.first").append("Some Stuff");

$("#trigger").click(function() {
 $(".append-something.first").append("Some Stuff");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append-something first"></div>
<div class="append-something second"></div>
<div class="append-something third"></div>

<button id="trigger">click</button>

$("#trigger").click(function() {
     $(".append-something:first").append("Some Stuff");
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append-something first"></div>
<div class="append-something second"></div>
<div class="append-something third"></div>

<button id="trigger">click</button>

【讨论】：

【解决方案5】：

您可以为此使用:first 选择器

$("#trigger").click(function() {
 $(".append-something:first").append("Some Stuff");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append-something"></div>
<div class="append-something"></div>
<div class="append-something"></div>

<button id="trigger">click</button>

【讨论】：

【解决方案6】：

每个 div 已经有三个不同的类，即first、second、third。您可以专门使用这些类将html附加为

 $(".first").append("Some Stuff");

但是如果你想为每个 div 添加相同的类，你应该使用

 $(".append-something:first").append("Some Stuff");

【讨论】：

【解决方案7】：

$(".append-something").first().append("Some Stuff");

【讨论】：