jquery select section by it's own index

Question

我怎樣才能選擇第三部分，並在它之前添加新的部分？

前：

<article id="container"> 
    <section> a </section> 
    <section> b </section> 
    <section> d </section> 
    <section> e </section> 
</article> 

後：

<article id="container"> 
    <section> a </section> 
    <section> b </section> 
    <section> c </section> 
    <section> d </section> 
    <section> e </section> 
</article> 

Answer 1

您可以使用$(target).before(content)或$(content).insertBefore(target)，如下圖所示：

$('<section> c </section>').insertBefore('#container > section:eq(2)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<article id="container"> 
 
    <section> a </section> 
 
    <section> b </section> 
 
    <section> d </section> 
 
    <section> e </section> 
 
</article>

Answer 2

您可以使用.after()選擇：

$("#container section:eq(1)").after($("<section>cc</section>")); 

Working Demo

Answer 3

使用eq

$newSection = $("<section>c</section>"); 
$("#container section").eq(2).before($newSection); 

http://api.jquery.com/before/，https://api.jquery.com/eq/

演示-->https://jsfiddle.net/2f7n1r06/1/

Answer 4

使用Node.insertBefore()和:nth-child - CSS選擇第三個部分。

// Create a new, plain <section> element 
 
var sp1 = document.createElement("section"); 
 
sp1.innerHTML ="c"; 
 
// Get a reference to the element, before we want to insert the element 
 
var sp2 = document.querySelector("#container section:nth-child(3)");//he third section 
 
// Get a reference to the parent element 
 
var parentDiv = sp2.parentNode; 
 

 
// Insert the new element into the DOM before sp2 
 
parentDiv.insertBefore(sp1, sp2);

<article id="container"> 
 
    <section> a </section> 
 
    <section> b </section> 
 
    <section> d </section> 
 
    <section> e </section> 
 
</article>