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

Hi there, i want the above code to paste/append the words "Some Stuff" into the div-class "append-something" but only into the first div with the class-name. (In my code the words should append to "first", not to "second" or "third"). Thanks a lot!

Answer 1

You can use the :first or the :first-child selector. For only the last you should use the :last selector.

For any other element you can use the index of the element. jQuery will create an array of all the elements he finds with append-something class. So the first element will be index of 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");
});

To play with it: https://jsfiddle.net/9bfskesb/

Answer 2

您可以使用第一个选择器 ：

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

Answer 3

Use $(".append-something:first").append("Some Stuff"); or if you have the class .first then simply $(".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

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 5

You can use :first selector for this

 $("#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 6

you have already three different classes for each div ie first , second , third . You can use the classes specifically to append the html as

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

But if you want to add using the same class for each div the you should go with

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

Answer 7

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