4

我有几个这样的div

<div rel="5">
  Divs content goes here
</div>
<div rel="3">
   Div 3 Here
</div>
<div rel="4">
  Div 4 Here
 </div>
 <div rel="4.5">
   Div 4.5 here
</div>

您将如何使用 Jquery 对 div 进行排序，以便在 DOM 中对它们进行物理排序，首先使用最少的 rel 属性？

例如 3、4、4.5、5

4

3 回答 3

12

看我的小提琴：http: //jsfiddle.net/6hpNz/8/

您可以利用 javascript 和 jQuery 的组合很容易地做到这一点：

给定以下 HTML：

<div class="unsorted">
    <div rel="5">
      Div 5 here
    </div>
    <div rel="3">
       Div 3 Here
    </div>
     <div rel="4.5">
       Div 4.5 here
    </div>
    <div rel="4">
      Div 4 Here
     </div> </div>
<div class="sorted"></div>

此脚本将为您提供所需的输出：

$(document).ready(function () {
    var sortedDivs = $(".unsorted").find("div").toArray().sort(sorter);
    $.each(sortedDivs, function (index, value) {
        $(".sorted").append(value);
    });
});

function sorter(a, b) {
    return a.getAttribute('rel') - b.getAttribute('rel');
};
于 2012-04-05T02:48:53.370 回答
1

我确信有一种更有效的方法，但无论如何这是我的答案：

HTML：

<div rel="5">
      Divs content goes here
    </div>
    <div rel="3">
       Div 3 Here
    </div>
    <div rel="4">
      Div 4 Here
     </div>
     <div rel="4.5">
       Div 4.5 here
    </div>

jQuery：

var array = new Array();

$('div').each(function(){   
    array.push($(this).attr('rel'));
});

array = array.sort();

var reordedDivs = "";

$.each(array, function(i, obj1){

    $('div').each(function(j, obj2) {

        if ($(obj2).attr('rel') == obj1) {

            var divContent = $(obj2).html();
            var rel = obj1;

         reordedDivs += "<div rel='" + rel + "'>" + divContent + "</div>";

        }

            });  
});

$('body').html(reordedDivs);

小提琴：http: //jsfiddle.net/F6csV/17/

于 2012-04-05T02:10:51.450 回答
0

您可以使用 DOM 方法选择元素，将 DOM 列表转换为 Array，然后使用Array.sort().

于 2012-04-04T23:57:26.163 回答