jquery n-child()不工作
我需要一些关于jquery的帮助。 这是HTML代码jquery n-child()不工作,jquery,html,Jquery,Html,我需要一些关于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>
<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>
上述代码的输出为:第一个内部分区
第一个标签
第二个内部分区
第二个标签
第三标签
我想要一个新的序列,应该是这样的: 第二个内部分区
第二个标签
第一个内部分区
第一个标签
第三个标签:
:n子类(n)
伪类很容易与:eq(n)
混淆,甚至
尽管这两种方法可能会产生截然不同的匹配元素。
对于:第n个子项(n)
,所有子项都将被计数,而不管它们是什么
是,并且仅当指定的元素与
附加到伪类的选择器
因此,当您使用诸如label:nth child(1)
之类的选择器时,您会说“所有label
元素都是其父元素的第一个子元素,而不是“所有第一个label
元素”。如果还有其他东西,例如div
,则是第一个子元素,label:nth child(1)
不匹配任何内容
使用它可能更自然,它允许您在匹配集中指定索引。或者,您可以使用,它更接近于我认为您假设的第n个孩子所做的。:
:n子类(n)
伪类很容易与:eq(n)
混淆,甚至
尽管这两种方法可能会产生截然不同的匹配元素。
对于:第n个子项(n)
,所有子项都将被计数,而不管它们是什么
是,并且仅当指定的元素与
附加到伪类的选择器
因此,当您使用诸如label:nth child(1)
之类的选择器时,您会说“所有label
元素都是其父元素的第一个子元素,而不是“所有第一个label
元素”。如果还有其他东西,例如div
,则是第一个子元素,label:nth child(1)
不匹配任何内容
使用它可能更自然,它允许您在匹配集中指定索引。或者,你可以使用,它更接近于我认为你假设的:第n个孩子所做的。我发现了两个问题
您的问题中的脚本中有一些隐藏字符(可能只是复制/粘贴)
您需要在insertAfter
中以5元素为目标,因为有一个
也很重要
$(“#outerDiv:n个孩子(1)”)。后面插入('label:n个孩子(5)');
$(“#外部标签:第n个孩子(1)”).insertAfter('div:n个孩子(5)')代码>
第一内分区
第一标签
第二内分区
第二标签
第三个标签我看到两个问题
您的问题中的脚本中有一些隐藏字符(可能只是复制/粘贴)
您需要在insertAfter
中以5元素为目标,因为有一个
也很重要
$(“#outerDiv:n个孩子(1)”)。后面插入('label:n个孩子(5)');
$(“#外部标签:第n个孩子(1)”).insertAfter('div:n个孩子(5)')代码>
第一内分区
第一标签
第二内分区
第二标签
第三个标签
您使用哪种浏览器?IE8下不支持第n个子项的?IE8下不支持第n个子属性。我使用的是chrome,但对于这段代码,我必须确保它在每个浏览器上运行。我的逻辑是……在第一行中,我移动了“outerDiv”的第一个子属性它也是第四个孩子后面的一个div…因此它不再是第一个孩子,然后是带有类“label1”的标签成为第一个子项。之后,该标签在第四个子项之后移动,第四个子项又是一个较早移动的div标记。我注意到,自最初发布以来,n个子项中的特定数字发生了更改。它们现在准确了吗?我的逻辑是……在第一行中,我移动了“outerDiv”的第一个子项,它也是第四个子项之后的一个div……因此它不再是第一个子项,然后是带有类“label1”的标签成为第一个子项。之后,该标签在第四个子项之后移动,第四个子项又是一个较早移动的div标记。我注意到,自最初发布以来,n个子项中的特定数字发生了更改。它们现在准确了吗?非常感谢。这解决了我的问题。再次感谢:)非常感谢。这解决了我的问题。再次感谢:)
$("#outerDiv div:nth-child(1)").insertAfter("label:nth-child(4)");
$("#outerDiv label:nth-child(1)").insertAfter("div:nth-child(4)");