重新排序div和他们的孩子

时间:2011-09-20 14:53:33

标签: jquery sorting html

我正在尝试根据它们包含的某些值对div进行重新排序。我的代码如下

HTML

<div id="content_id_1">
  <ul>
    <li> some text, not important for the reordering but it must move with it's parent div</li>
    <li> some text, not important for the reordering but it must move with it's parent div</li>
    <li>
      <div class=‘date--2011-11-11’>2011-11-11’< /div> 
    </li>
  </ul>
</div>
<div id="content_id_2">
  <ul>
    <li> some text, not important for the reordering but it must move with it's parent div</li>
    <li> some text, not important for the reordering but it must move with it's parent div</li>
    <li>
      <div class=‘date--2011-10-10’>2011-10-10’< /div> 
    </li>
  </ul>
</div>

等等......

在更改名为#data_filter的过滤器时,我希望主要div(带有content_id_something的那些)及其整个内容按日期值重新排序...我尝试调整以下示例(http:// stackoverflow。 com / questions / 2501789 / jquery-sort-divs -in-to-content-of-different-sub-divs),但我有点失落...... JQuery:

$("#data_filter").change(function(){
    function sortDateASC(a, b){
        return $(a).find(div[class^=date--])  > $(b).find(div[class^=date--])  ? 1 : -1;
   };
$(div[class^=date--]) .each(function(){
    $(this).parent().parent().parent().sort(sortDateASC);
   }); 
}) ;

非常感谢你的帮助!

2 个答案:

答案 0 :(得分:1)

类似的东西:

$("#data_filter").change(function(){
  function sortDateASC(a, b){
    var keya = new Date($(a).find('div[class^="date--"]').text().replace("'","")).getTime();
    var keyb = new Date($(b).find('div[class^="date--"]').text().replace("'","")).getTime();
    return keya > keyb ? 1 : keya < keyb ? -1 : 0;
  }
  $('div[class^="date--"]') .each(function(){
    $(this).closest("#listparent").children().sort(sortDateASC).appendTo("#listparent");
  }); 
});

其中列表包含在id为listparent

的元素中

编辑:这是一个小提琴:http://jsfiddle.net/EUkPb/

答案 1 :(得分:0)

你只能比较值,而不是jquery对象。所以你可以尝试:

return $(a).find(div[class^=date--]).attr('class')  > $(b).find(div[class^=date--]).attr('class') ? 1 : -1;

不确定它是否有效。