Question

我正试图在第二天到最后一刻之前，从班级.books_inarticle_list移动一个类$('.books_inarticle_list').insertBefore('#content_column > h2:nth-last-child(2)');。

我使用的是以下无法使用的内容：

$('.books_inarticle_list').insertBefore('#content_column > h2:nth-of-type(6)');

另一方面，这样的事情有效：

nth-last-child()

所以问题必须在false选择器上，但我不知道它可能是什么。

是否有人发现该代码有任何问题或者知道将该元素移动到第二个到最后一个H2标记之前的替代方法？

Answer 1

尝试.get() method，它支持负数反转。

$('.books_inarticle_list').insertBefore($('#content_column > h2').get(-2));

修改第二个想法是，更有意义的是按照自己的示例使用:nth-last-of-type() selector，这将反过来。

$('.books_inarticle_list').insertBefore('#content_column > h2:nth-last-of-type(2)');

:nth-last-child()不适合你的原因是因为它和:nth-child()指的是他们在DOM中拥有的兄弟姐妹的数量，而不是选择器返回的元素列表。 / p>

Answer 2

我更喜欢使用＆＃34;：eq＆＃34;甚至＆＃34;：nth-of-type＆＃34;。所以将是：

$('.books_inarticle_list').insertBefore('#content_column > h2:eq('+($('#content_column > h2').length()-2)+')');

Answer 3

您最好提供最佳解决方案的HTML，但考虑到您的问题，我建议如下：

var $h2s = $("#content_column > h2");
var $secondToLast = $h2s.eq($h2s.length-2);
$('.books_inarticle_list').insertBefore($secondToLast);

我使用nth-child只是因为只要你修改HTML结构就会抛弃它。

Answer 4

注意，:nth-*选择器使用基于1的索引。您可以使用:nth-last-of-type()选择器和2作为参数，从该类型的最后一个元素选择第二个，.before()链$(".books_article_list")作为参数。

$("#content_column h2:nth-last-of-type(2)").before($(".books_article_list"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="books_article_list">books</div>
<div id="content_column">
<h2>0</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
</div>

使用jQuery在第二个到最后一个h2之前移动元素

4 个答案: