3

我不知道该怎么做。假设我有以下 HTML 代码：

<div id="container">
  <div class="item" order="5"></div>
  <div class="item" order="3"></div>
  <div class="item" order="4"></div>
  <div class="item" order="1"></div>
  <div class="item" order="2"></div>
</div>

使用 jQuery，我如何根据属性“order”对这些 div 进行排序？通过重新排序，我的意思是我希望 dom 根据属性“order”更新 div 的顺序。这自然也会调整 div 的 z-index。我知道根据属性顺序设置 z-index 会给我在浏览器窗口中的正确显示，但它不会操纵 dom 顺序。

我假设我会遍历#container 并像这样获取孩子及其顺序：

$('#container > div').each( function(event) {
   var itemOrder = $(this).attr('order');
});

...但我不知道如何操纵订单。任何帮助将不胜感激。

4

5 回答 5

10

你可以这样做 ：

$('#container').append($('#container .item').sort(function(a,b){
   return a.getAttribute('order')-b.getAttribute('order');
}));

示范

于 2013-09-13T11:35:10.880 回答
1 
$('#container > div').each( function(event) {
    $(this).css('z-index', $(this).attr('order'));
});
于 2013-09-13T11:35:37.723 回答
0

我想你想要这个：DEMO

 $('#container > div').sortElements(function(a, b){
    return parseInt($(a).attr('order')) > parseInt($(b).attr('order')) ? 1 : -1;
});
于 2013-09-13T11:46:51.297 回答
0

以下是如何按属性“标签”将 div 排序为单个单词。JSFiddle 有代码来检查多个单词等。发布是因为我在寻找它时找不到解决方案。

<div id="tag_sections">
   <!-- populated with sorted divs -->    
</div>
<div id="all_tags">
    <div data-tag="blue">8</div>
    <div>1</div>
    <div data-tag="tag">2</div>
    <div data-tag="red">3</div>
    <div data-tag="blue">4</div>
    <div>5</div>
    <div data-tag="red">6</div>
    <div data-tag="blue">7</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    // sort all by title tag
    var allTags = [];
    $('#all_tags div').each(function() {
       theTag = $(this).attr('data-tag');
       if (!theTag) { theTag = 'ungrouped'; }
       if (!$('#'+theTag).length) {
            allTags.push(theTag);
            $('#tag_sections').append('<div id="'+theTag+'"><h3>'+theTag+'</h3></div>');   
       }
       if ($.inArray(theTag, allTags) > -1) {
           $('#tag_sections #'+theTag).append($(this));
       }
    });
</script>

http://jsfiddle.net/zyEwF/269/

按不是数字的属性值排序的演示，并创建新的 div 以将这些排序的元素添加到其中。

于 2015-11-05T17:47:24.700 回答
-1

试试看这里。可能有助于理解基本原理。http://james.padolsey.com/javascript/sorting-elements-with-jquery/

于 2013-09-13T11:38:20.003 回答