使用 JavaScript 或 jQuery 对 li 元素进行排序

sort li elements using javascript or jquery

本文关键字：元素 排序 li JavaScript jQuery 使用      更新时间：2023-09-26

在我的页面中，我有福洛廷。我需要使用 javascript 来整理它。

<li class="cat2 lang1">Hello</li>
<li class="cat2 lang1">Hello</li>
<li class="cat1 lang2">Hello</li>
<li class="cat3 lang3">Hello</li>

我尝试的是：

$('#movieFeatureFilter span#selGenre .subMenus li').click(function()
{
    if(this.id != '')
    {
        $('.movie_lists ul li').hide();
        $('.movie_lists ul li.cat'+this.id).show();
    }
    else $('.movie_lists ul li').show();
});

这很完美。 但是我需要使用 lang 和 cat 的组合对列表进行排序。

即如果我选择 Cat1 作为类别，lang2 作为语言，那么它可能会显示第三个 li

我想你明白我的意思是。 对不起，解释不好。 请帮帮我

var $items = $('ul li'), $cat = $('#cat'), $lang = $('#lang');
$('#cat, #lang').change(function(){
    var cat = $cat.val(), lang = $lang.val(), $filtered = $items;
    if(cat){
        $filtered = $filtered.filter('.' + cat);
    }
    if(lang){
        $filtered = $filtered.filter('.' + lang);
    }
    $items.not($filtered).hide();
    $filtered.show()
})

演示：小提琴

似乎不是

排序，而是想根据猫和郎的选择显示/隐藏项目。 以下功能将满足您的目的：

$("#movieFeatureFilter span#selGenre .subMenus li").click(function () {
   /*GET cat AND lang FROM DROPDOWNS*/
    var cat = $("#c").val(),
        lng = $("#l").val();
    $("#<ID OF UL> li").filter(function () {
        $this = $(this);
        if ($this.hasClass(cat)) {
            if (!$this.hasClass(lng)) {
                $this.hide();
            } else {
                $this.show();
            }
        } else {
            $this.hide();
        }
    });
});

在这里检查小提琴。

相关文章：