특정 요소에 적용되는 선택기를 찾는 효율적인 방법

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

당신은 다음과 같이 .is()로 필터링 된 배열을 얻을 수 $.grep()을 사용할 수 있습니다

:

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합니다.