0

我第一次尝试将数据属性与 jQuery 一起使用，我想做的是根据 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/

4

3 回答 3

1

解决方案#1：

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

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

更新小提琴

解决方案#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;
})

小提琴演示

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

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

于 2013-07-26T15:03:55.270 回答
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/

于 2013-07-26T15:26:12.087 回答
0

更新提琴手

使用不带“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


});
于 2013-07-26T15:10:04.117 回答