jquery nth-child（）不工作

我需要一些關於jquery的幫助。這是HTML代碼jquery nth-child（）不工作

<div id="outerDiv"> 
<div id="firstInnerDiv"> 
    First Inner Div 
</div> 

<label class="label1">First Label</label><br/> 

<div id="secondInnerDiv"> 
    Second Inner Div 
</div> 

<label class="label2">Second Label</label> 
</div> 

<label class="label2">Third Label</label>

，這是jQuery代碼

$("‪#‎outerDiv‬ div:nth-child(1)").insertAfter("label:nth-child(4)"); 
    $("#outerDiv label:nth-child(1)").insertAfter("div:nth-child(4)");

上述代碼的輸出是：
第一內股利
首標籤
第二內股利
第二標籤
第三個標籤

我想要一個新的序列應該是這樣的：

第二內部事業部
第二個標籤
第一內部事業部
正牌
第三標籤

來源

2014-10-07 Inzamam Tahir

您使用哪種瀏覽器？ IE8以下不支持'nnth-child'屬性。 – 2014-10-07 23:49:21

我使用鉻，但對於此代碼，我必須確保它在每個瀏覽器上運行 – 2014-10-07 23:50:32

我看到兩個問題

有腳本的一些隱藏人物在你的問題（也許它只是複製/粘貼）
您需要在insertAfter 5元目標因爲有一個<br>那也算

$("#outerDiv div:nth-child(1)").insertAfter('label:nth-child(5)'); 
 
$("#outerDiv label:nth-child(1)").insertAfter('div:nth-child(5)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="outerDiv"> 
 
    <div id="firstInnerDiv">First Inner Div</div> 
 
    <label class="label1">First Label</label> 
 
    <br/> 
 
    <div id="secondInnerDiv">Second Inner Div</div> 
 
    <label class="label2">Second Label</label> 
 
</div> 
 
<label class="label2">Third Label</label>

來源

2014-10-08 00:05:37

非常感謝。這解決了我的問題。再次感謝：） – 2014-10-08 00:15:37

Quoting jQuery：

僞類很容易與:eq(n)混淆，即使是雖然這兩者可能導致顯着不同的匹配元素。對於:nth-child(n)，所有的孩子都會被計數，不管它們是什麼，並且指定的元素只有在匹配附加到僞類的選擇符時才被選擇。

所以，當你使用像label:nth-child(1)一個選擇，你說「是他們的父母的第一個孩子所有label元素，」不「所有第一label元素。」如果還有其他內容，如div，那是第一個孩子，label:nth-child(1)什麼都不匹配。

您可能更自然地使用.eq()，它允許您在匹配的集合中指定索引。或者，您可以使用，這更接近於我認爲您認爲:nth-child做了什麼。

來源

2014-10-07 23:50:39

我的邏輯是什麼.....在第一行中我已經移動了「outerDiv」的第一個孩子，這也是一個div在第四個孩子之後......因此它不再是第一個孩子，然後帶有「label1」類的標籤成爲第一個孩子。 – 2014-10-07 23:57:37

之後，該標籤被移動到第四個孩子之後，這又是一個早先移動的div標籤 – 2014-10-07 23:58:56

我注意到，自從您的原始發佈後，「n-child」選擇器中的具體數字發生了變化。他們現在準確嗎？ – 2014-10-08 00:00:09

jquery nth-child（）不工作

回答

相關問題