使用jQuery对类进行排序_Jquery

使用jQuery对类进行排序

jquery

使用jQuery对类进行排序,jquery,Jquery,我创建了jQuerySorter插件，如下所示，用于按类过滤。但是现在我不知道如何在默认情况下只显示class=“apple”。现在当我重新加载页面时，苹果和树都是可见的 <ul> <li class="apple">APPLE</li> <li class="tree">TREE</li> <li class="apple tree">ALL</li> </ul> <div>

我创建了jQuerySorter插件，如下所示，用于按类过滤。但是现在我不知道如何在默认情况下只显示

class=“apple”

。现在当我重新加载页面时，苹果和树都是可见的

<ul>
  <li class="apple">APPLE</li>
  <li class="tree">TREE</li>
  <li class="apple tree">ALL</li>
</ul>

<div>
  <div class="apple">APPLE</div>
  <div class="tree">TREE</div>
  <div class="apple">APPLE</div>
  <div class="tree">TREE</div>
  <div class="apple">APPLE</div>
  <div class="tree">TREE</div>
</div>

<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$("ul li").click(function() {
  visibleClasses = $(this).attr("class").split(" ");
  $("div div").hide(); // or slideUp / fadeOut
  for(i in visibleClasses) {
    $("div div."+visibleClasses[i]).fadeIn(500); // or slideDown / show
  }
});
</script>


苹果
树
所有

苹果
树
苹果
树
苹果
树
$（“ul li”）。单击（函数（）{
visibleClasses=$（this.attr（“class”）.split（“”）；
$（“div div”）.hide（）；//或滑动/淡出
对于（i在VisibleClass中）{
$（“div div.”+visibleClasses[i]）.fadeIn（500）；//或向下滑动/显示
}
});

将以下内容添加到脚本末尾：

$("div div").hide();
$("div div.apple").show();

将以下内容添加到脚本末尾：

$("div div").hide();
$("div div.apple").show();

用以下方法隐藏所有非苹果：

$("div div:not(.apple)").hide();

与其迭代数组，不如构造一个选择器，一次获取所有元素：

var selector = "div div." + visibleClasses.join(",div div.");

选择器

将包含

“div div.apple，div div.tree”

，它将选择与逗号分隔选择器匹配的元素。然后，您可以执行以下操作：

$(selector).fadeIn(500);

编辑：因此，通过此更改，您的代码将如下所示：

<script type="text/javascript">  
    $(function () {
        $("div div:not(.apple)").hide();
        $("ul li").click(function() {
            var visibleClasses = $(this).attr("class").split(" ");
            $("div div").hide();
            var selector = "div div." + visibleClasses.join(",div div.");
            $(selector).fadeIn(500);
        });
    });
</script>


$（函数（）{
$（“div div:not（.apple）”）.hide（）；
$（“ul li”）。单击（函数（）{
var visibleClasses=$（this.attr（“类”）.split（“”）；
$（“div div”）.hide（）；
var selector=“div div.”+visibleClasses.join（“，div div.”）；
$（选择器）.fadeIn（500）；
});
});

顺便说一下，如果您选择迭代数组，请使用常规的

for

循环或。

for..in

语句用于枚举，而不是迭代。

隐藏所有非苹果：

$("div div:not(.apple)").hide();