Question

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

我不确定如何找到数据顺序属性的正确值，虽然我一直在接受“未定义”？

有人看到我做错了什么？而且，有没有办法在dom中找到正确的elemtn？所以如果当前值的数据属性是5，那么它应该在具有balue 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/

Answer 1

解决方案＃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 [{1}}与Div #5重叠

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

Answer 2

似乎你有足够的答案来解释为什么你的订购功能不能正常工作。

使用基本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/

Answer 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


});

使用jQuery基于属性值将元素移动到正确的顺序

3 个答案: