1

她是我的 html 和 jQuery。当我按下过滤器 div 中的“排序”“按钮”时，我希望能够按类名的字母对它们进行排序。现在我可以用“绿色”隐藏所有其他人，所有其他人都会隐藏。但是我需要对它们进行排序的能力。

    <div id='filters'>
        <a href='#' id ="sort">Sort</a> 
        <a href='#' id='blue'>blue</a>
        <a href='#' id='green'>green</a>
        <a href='#' id='yellow'>yellow</a>
    </div

    <div id="box">
        <ul id="filter">
            <li class="green"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
        </ul> 
    </div>

$('#filters a').click(function(e){ 
    e.preventDefault();  
    var filter = $(this).attr('id');  
        $('#box ul li').show();  
        $('#box ul li:not(.' + filter + ')').hide();  
});
4

1 回答 1

0

这将按升序对列表进行排序：

 <div id='filters'>
    <a href='#' id ="sort">Sort</a> 
    <a href='#' id='blue'>blue</a>
    <a href='#' id='green'>green</a>
    <a href='#' id='yellow'>yellow</a>
</div>

<div id="box">
    <ul id="filter">
        <li class="green">Green</li>
        <li class="blue">Blue</li>
        <li class="yellow">Yellow</li>
        <li class="blue">Blue</li>
        <li class="yellow">Yellow</li>
    </ul> 
</div>

$('#filters a').click(function(e){ 

  e.preventDefault();  

  var filter = $(this).attr('id'); 

  if (filter == "sort") {

    $('#box ul li').sort(asc_sort).appendTo('#filter');
  }
  else {

    $('#box ul li').show();  
    $('#box ul li:not(.' + filter + ')').hide(); 

  }
});

function asc_sort(a, b) { 
    return ($(b).text()) < ($(a).text());
}

JSFiddle

完全披露：我使用了在这个问题中找到的代码。

如果您要扩展它以使列表交替升序和降序排序，您可能只需要一个变量来跟踪列表当前的顺序，否则检查列表当前是否按升序排列，然后降序排序，反之亦然。

于 2013-02-20T14:31:39.530 回答