Question

背景： 我有一个wordpress博客，它会按时间顺序输出故事

我左栏 .leftColumn ，右列 .rightColumn

我有wordpress将所有故事输出到我的.leftColumn

在故事全部输出之后，即时通过jQuery检查facebook就像故事的数量，超过阈值的那些将被移动到.rightColumn

fi = curElement.closest('.thePost');
$(fi).appendTo(".rightColumn");

从leftColumn到rightColumn的移动很好

问题：

facebook like count查询结果随机出现略有不同的时间，因此当移动到右列时的故事是随机排列的。我想保持wordpress在（时间顺序）输出故事的顺序。

跟踪这个的一个简单方法是我为每个故事分配了一个数字ID，以便我们知道一般顺序。

<div class="thePost" id="story1"> blah blah </div>
<div class="thePost" id="story2"> blah blah </div>
<div class="thePost" id="story3"> blah blah </div>

问题：

是否有可能让jQuery检查已经在rightColumn中的什么，并根据storyX id将当前元素放在它上面或下面，以保持一切顺序（使用appendTo或任何其他方式？）

Answer 1

您可以创建一个小插件来检查ID并以正确的顺序插入新元素，但这并不难。

这样的事情会起作用

(function($) {
    $.fn.stickTo = function(elem) {
        return this.each(function() {
            var posts = $(elem).append(this).find('.thePost');

            posts.sort(function(a,b) {
                return a.id.replace(/\D/g,'') - b.id.replace(/\D/g,'');
            }).appendTo(elem);
        });
    }
})(jQuery);

jQuery(function($) {

    curElement.closest('.thePost').stickTo(".rightColumn");

});

Answer 2

不是自动的，但您可以使用setTimeout（）来评估列中的新内容并根据需要追加。

Answer 3

我会做什么：

使用$.each
确定要在之后插入新故事的故事（使用data-* attributes并使用$.attr检索值）
使用$.insertAfter使用上述步骤中的故事。

希望这有帮助！

JQuery：AppendTo按顺序？

3 个答案: