jquery - 查找适用于特定元素的选择器的有效方法

Question

我在 js 数组和一个元素中预定义了 css 选择器列表。我需要找到哪些选择器将应用于该元素。

这是我的代码:http://jsfiddle.net/mjALF/

html

<div id="main">
    <div class="a" id="d1">
        <div class="b"  id="d2">
            <div class="c"  id="d3">

            </div>
        </div>
    </div>
    <div class="b"  id="d4"></div>
    <div class="c"  id="d5"></div>
</div>

js

var selectors = ['#main .a', '#main .a .b', '.a', '#main .c', '#main .a .b .c'];

// pseudo code
/*

find_selectors($('#d4'), selectors);
result: null

find_selectors($('#d1'), selectors);
results: ['#main .a', '.a'];


*/

Answer 1

您可以使用$.grep()使用 .is() 获取过滤后的数组，像这样:

var elem = $("#d1");
var results = $.grep(selectors, function(s) { return elem.is(s); });

You can test it out here 。或者，作为插件!

$.fn.selectorMatch = function(sArray) {
    var elem = this;
    return $.grep(selectors, function(s) { return elem.is(s); });
};

然后你可以这样调用它:

var results = $("#d1").selectorMatch(selectors);

You can test the plugin version out here .