jQuery:多选择器问题

Question

我在显示 div 时遇到问题，其中 div 有三个需要匹配的选择器。这些是典型的:

<div class="pinfo draft sept-2010">...</div>
<div class="pinfo published feb-2011">...</div>
etc...

总是有pinfo，后面是审核状态(已发布或草稿)，然后是时间范围(月+年)

这是我目前拥有的:

// Hide all rows
$(".pinfo").hide();
// Now, show those rows where the selectors are in the filters built
for (idx in $cls)
{
    console.log('filter: '+$cls[idx]);
    $('.pinfo').filter($cls[idx]).show();
}

其中 $cls 是字符串数组。这些字符串是根据用户从输入表单中做出的选择而构建的类选择器。例如:

$cls = [".Draft .sept-2011", 
        ".Published .sept-2011"]

我在显示 div 时遇到问题，其中 div 有三个需要匹配的选择器。

感谢任何帮助。

谢谢!埃里克

Answer 1

1. 不要在数组上使用 for..in 循环。仅在对象上使用它们，并且仅与 hasOwnProperty 一起使用。您可以使用 jQuery 的 $.each这里循环遍历数组。
2. 这是个大问题。像 ".Draft .sept-2011" 这样的选择器表示“查找具有 sept-2011 类的元素，这些元素的祖先元素具有 Draft 类>. 您可以组合多个类选择器:您想要的是 .Draft.sept-2011。

所以你的代码可能如下所示:

$cls = [".Draft.sept-2011", 
        ".Published.sept-2011"]

var $pinfo = $('.pinfo').hide();
$.each($cls, function(idx, val) {
    $pinfo.filter(val).show();
});

请注意，为了提高性能，我还缓存了 $('.pinfo') 选择器调用。