Question

我试图通过使用数字定义类来尝试将带有类名的div容器插入到包含其他容器的框中。

只要标记已按时间顺序排列，我就能正常工作：

http://play.meyouand.us/140418-rearrange/rearrange4a.html

但是，如果标记顺序是按时间顺序混合或反向排列，则该功能不会将div容器放在准确的位置（因为我使用的函数是before（））：

http://play.meyouand.us/140418-rearrange/rearrange4b.html

我目前仍然坚持如何解决这个问题，因为我不确定是否应该首先使用预先排序框的策略，或者是否有现有的jQuery函数可以只需将div容器放在我需要的地方，这将使其成为理想而简单的解决方案。对战略或方法的任何想法都会有所帮助！

到目前为止

jQuery ...... - http://jsfiddle.net/foomarks/qM27z/2/

$('[class*=order-]').each(function() {

        /* 1. Split the classes to get an array */      
        var cl = $(this).prop('class').split(/\s+/);
        var clNumber = cl.map( function(val){
            if (val.indexOf('order-') !== -1) {  //find the match
            return val.replace( /^\D+/g, '')  // return back the number
            }
        });
        console.log("clNumber: " + clNumber[1]);

        /* 2. Presort boxes */
            /* Strategy A 
               . If this clNumber is greater than the next .order- box, append it after 
               . else do nothing 
            */

            /* Strategy B
               . Sort the array
               . then .append() the output
               . this may not work within the .each function because of sequencing
            */

        /* 3. Use the insert number to reposition */
        $(this).insertBefore('.box:nth-child('+ clNumber[1] + ')');    
    });

Answer 1

我的解决方案是：

停止使用类来存储变量;这是data-属性的用途。
遍历要移动的元素，创建一个{element，order}对数组
将对分类为正确的顺序
循环执行插入的对。

工作演示：http://jsfiddle.net/qM27z/3/

var tomove =
    $('[data-order]').map(function() {
        return { element: this, order: $(this).data("order") };
    }).get().sort(function(a,b) { return a.order-b.order; });

$.each(tomove, function(i, tm) {
    $(tm.element).insertBefore('.container .box:nth-child('+tm.order+')')
});

Answer 2

我感觉有一种更干净的方法可以做到这一点，但这有效：

<强> jsFiddle example

var ary1 = $('div[class*="order-"]');
var ary2 = $('div.container div.box');
var total = ary1.length + ary2.length;
$('.container').empty();
for (var i = 1; i <= total; i++) {
    var match = false;
    ary1.each(function () {
        var cl = $(this).prop('class').split(/\s+/);
        var clNumber = cl.map(function (val) {
            if (val.indexOf('order-') !== -1) { //find the match
                return val.replace(/^\D+/g, '') // return back the number
            }
        });
        if (clNumber[1] == i) {
            $(this).appendTo('.container');
            match = true;
        }
    })
    if (!match) $('<div class="box">Box</div>').appendTo('.container')
}

按时间顺序对数字进行排序

2 个答案: