Question

她是我的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();  
});

Answer 1

按升序对列表进行排序：

 <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

完全披露：我使用了this question中的代码。

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

过滤字母jquery

1 个答案: