找到適用於特定元素的選擇器的有效方法

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。