使用jQuery根据属性值将元素移动到正确的顺序答案

【问题标题】：Move element into correct order based upon attribute value with jQuery使用jQuery根据属性值将元素移动到正确的顺序
【发布时间】：2013-07-26 23:36:58
【问题描述】：

我第一次尝试使用 jQuery 的数据属性，id 喜欢做的是根据 data-order 属性将元素移动到正确的顺序。

我不确定如何找到数据顺序属性的正确值，尽管我不断收到“未定义”？

有人看到我做错了什么吗？而且，有没有办法找到它应该在dom中出现的正确元素？因此，如果当前值的数据属性是 5，那么它应该在属性为 4 的属性之后..

$(document).ready(function(){  

// Move the profile back to positton funciton
function dmoveProfile(){

    alert($(this).data("data-order"))

};

$('.box').click(function(){
    alert($(this).data("data-order"))
});

// move into position


});

http://jsfiddle.net/Fta6p/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

对于您的排序功能为何无法正常工作，您似乎已经有了足够多的答案。

用基本的 JS 对元素进行排序会更好。如果您正在寻找 jquery 解决方案，您可以在这里找到它：

function sortBoxes(){
    for(var i=1; i<= $('.box').length; i++) {
        var $box = $('.box[data-order="'+i+'"]');
        $box.appendTo($('section'));
    }
};

$('.box').click(function(){
    // alert($(this).data("order"));
    sortBoxes();
});

演示：http://jsfiddle.net/Fta6p/7/

【讨论】：

【解决方案2】：

解决方案 #1：

.data() 用于存储与匹配元素关联的任意数据。请改用.attr()。

$('.box').click(function(){
    alert($(this).attr("data-order"))
});

Updated Fiddle

解决方案 #2：

要按升序对 DOM 元素进行排序，您可以这样做：

jQuery.fn.sortDomElements = (function() {
   return function(comparator) {
      return Array.prototype.sort.call(this, comparator).each(function(i) {
              this.parentNode.appendChild(this);
      });
    };
})();

$("section").children().sortDomElements(function(a,b){
    akey = $(a).attr("data-order");
    bkey = $(b).attr("data-order");
    if (akey == bkey) return 0;
    if (akey < bkey) return -1;
    if (akey > bkey) return 1;
})

Fiddle Demo

注意：您的 div #5 与 Div #1 重叠

你可以看到div的输出正常，如果你尝试inspect element你会看到或者viewpagesource你会看到DOM元素是按升序排列的

【讨论】：

【解决方案3】：

Updated fiddler

使用不带“data-”前缀的jQuery .data() 方法，例如：

$(document).ready(function(){  

    // Move the profile back to positton funciton
    function dmoveProfile(){

        alert($(this).data("order"))

    };

    $('.box').click(function(){
        alert($(this).data("order"))
    });

    // move into position


});

【讨论】：