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

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