Эффективный способ найти селектор, который применяется к конкретному элементу

Question

У меня есть предопределенный список селекторов CSS в массиве js и элемент.Мне нужно найти, какие селекторы применимы к этому элементу.

Вот мой код: 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); });

Вы можете проверить это здесь . Или, как плагин!

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

Тогда вы можете назвать это так:

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

Вы можете проверить версию плагина здесь .