在第 n 个 div 之后插入 HTML，在 div 重新排序之后答案

【问题标题】：Insert HTML after nth div, after divs are re-ordered在第 n 个 div 之后插入 HTML，在 div 重新排序之后
【发布时间】：2015-04-11 23:02:27
【问题描述】：

我有一系列用 PHP 加载的 div。它们在 jQuery 中加载时重新排序，并且可以使用按钮重新排序。我想在第 n 个 div 之后插入一些 HTML（例如：总是在第 2 个之后，无论顺序如何）。我试过了：

$('#card-box').children(':eq(1)').after('<b>test</b>');

就在 div 重新排序的行下方。但它把它放在 PHP 中的第二个 div 下，在它们被 jQuery 重新排序之前，用一个按钮排序后它会移动到顶部。

在 jQuery 中，div 通过它们的 data-id 属性重新排序。像这样：

var div = $('#card-box');
var listitems = div.children('div.card').get();
listitems.sort(function (a, b) {
    return (+$(a).attr('data-id') > +$(b).attr('data-id')) ? -1 : (+$(a).attr('data-id') < +$(b).attr('data-id')) ? 1 : 0;
});

【问题讨论】：

重新排序是什么意思？直观地使用 css 位置或 dom 树上的真实顺序？
@FaresM。在 jquery 中的 dom 上重新排序，例如：var div = $('#card-box'); var listitems = div.children('div.card').get(); listitems.sort(function (a, b) { return (+$(a).attr('data-id') > +$(b).attr('data-id')) ? -1 : (+$(a).attr('data-id') < +$(b).attr('data-id')) ? 1 : 0; });
我知道 jQuery。您可以发布一些排序功能的相关代码吗？
编辑您的帖子以在其中添加此代码。

标签： javascript jquery html jquery-ui-sortable

【解决方案1】：

排序后需要重新注入到DOM中

var div = $('#card-box'),
    listitems = div.children('div.card');

listitems.sort(function (a, b) {....
});

listitems.detach().appendTo(div);
div.children(':eq(1)').after('<b>test</b>');

Fiddle

【讨论】：

这不起作用。我已经有一条更新 dom 的工作线：$.each(listitems, function (idx, itm) { div.append(itm); }); 我的麻烦是在 div 之间插入 html
您需要分离并重新注入整个排序的元素，而不是一个一个地插入。看看我发布的Fiddle 就可以了。
谢谢，我忘了删除列表项后的.get();。现在可以了！
太好了，如果您觉得答案有帮助，您可以点赞。