0

我很难为此找到一个优雅的解决方案。令 jQuery 在选择器中不包含“&”或“:and”运算符感到惊讶。

我正在建立一个标签过滤机制。我想根据所选标签减少结果集。所以我传入了一个标签查询，并且只想显示那些在与选择器匹配的部分中有子标签的元素。

问题：
只有当它具有所有匹配的子选择器时，我才需要返回一个 div。这段代码向我展示了 tag_query 中每个选择器的组合结果。我只需要匹配所有选择器的那些节点。下面的代码返回任何具有 .blue OR .green OR .button 子元素的 div（而不是 AND）。

var tag_query = ".green, .blue, .button";
nodes_to_show = $(".results .element .tags").children(tag_query);
console.log(nodes_to_show);

UI 端当前发生的情况：我选择了 1 个标签“.green”，但我只看到带有这些标签的元素。然后我添加了“.blue”标签，我看到了一个更大的集合（我希望看到一个更小的集合），因为它还获取了任何带有“.blue”标签的元素。我希望只看到带有“.blue”和“.green”标签的元素。

这是标签结构：

<div class="element">
    <div class="tags">
        <span class="item green">green</span>
        <span class="item button">button</span>
        <span class="item blue">blue</span>
    </div>
</div>

<div class="element">
    <div class="tags">
        <span class="item red">green</span>
        <span class="item button">button</span>
        <span class="item fire">blue</span>
    </div>
</div>

<div class="element">
    <div class="tags">
        <span class="item fire">fire</span>
        <span class="item button">button</span>
    </div>
</div>

查询“.button”标签应该返回上面所有的三个“元素”div。查询“.fire”和“.button”应返回最后 2 个“元素”div。

有什么想法吗？

4

1 回答 1

2

这里：

var arr = tag_query.split( ', ' );

$( '.element' ).filter(function () {
    var root = this;
    return arr.every(function ( className ) {
        return $( root ).find( className ).length > 0;
    });
}).show();

现场演示：http: //jsfiddle.net/DjS2u/1/

因此，对于每个.element元素，我测试它是否包含每个提供的类名的至少一个后代。我将tag_query字符串转换为数组——字符串形式不是很有用，并且在数组上我可以调用数组方法——在这种情况下every()。

替代解决方案：

var arr = tag_query.split( ', ' );

$( '.element' ).filter(function () {
    var $desc = $( this ).find( '*' );
    return arr.every(function ( className ) {
        return $desc.is( className );
    });
}).show();

现场演示：http: //jsfiddle.net/DjS2u/2/

于 2012-06-25T19:51:04.957 回答