jQuery的.append（）只在第一个元素有

Question

<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"); 
}); 

嗨， 我想上面的代码粘贴/写着“一些东西”追加到DIV级“追加出头”，但只有到了第一个div与班级名称。 （在我的代码中，单词应该追加到“第一”，而不是“第二”或“第三”）。非常感谢！

Answer 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/

Answer 2

可以使用first selector：

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

Answer 3

使用$(".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>

Answer 4

可以使用: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>

Answer 5

You Can use prependTo() method 

$("<span>Hello World!</span>").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>

Answer 6

你已经有三个不同的分类，例如first,second,third。您可以使用类专门的HTML追加为

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

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

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

Answer 7

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