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

Question

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

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

在 div 重新排序的行下方。但是它将它放在 PHP 中第二个的 div 之下，在它们被 jQuery 重新排序之前，并且在使用按钮排序后它移动到顶部。

div 在 jQuery 中通过其 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;
});

Answer 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

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

Insert HTML after nth div, after divs are re-ordered

html

javascript

jquery

jquery-ui-sortable