Question

我需要一些关于jquery的帮助。这是HTML代码

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

上述代码的输出是：
First Inner Div
第一标签
第二内部分第二标签
第三标签

我想要一个新的序列，应该是这样的：

Second Inner Div
第二标签
First Inner Div
第一标签
第三标签

Answer 1

Quoting jQuery：

:nth-child(n)伪类很容易与:eq(n)混淆，甚至虽然这两者可以导致显着不同的匹配元素。使用:nth-child(n)，所有孩子都被计算在内，无论他们是什么是，并且只有在匹配时才选择指定的元素选择器附加到伪类。

因此，当您使用label:nth-child(1)之类的选择器时，您会说＆＃34;所有label元素是其父母的第一个孩子，＆＃34; 不＆＃34;所有第一个label元素。＆＃34;如果还有其他内容，例如div，那就是第一个孩子，label:nth-child(1)没有任何匹配。

使用.eq()可能更自然，它允许您在匹配集中指定索引。或者，你可以使用:nth-of-type，它更接近我认为你假设的:nth-child。

Answer 2

我看到两个问题

您的问题中的脚本中有一些隐藏的字符（也许只是复制/粘贴）
您需要定位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>

jquery nth-child（）不工作

2 个答案: