jQuery와 CSS 선택기로 중첩 된 요소의 공통 상위/조상을 선택하십시오.

Question

내부 텍스트 만 알고있는 여러 중첩 요소의 공통 상위를 선택하려고합니다. 다음 코드에서 예를 들어

:

<unknown>  
    <unknown class="unknown"> 
     .... 
     <unknown> 
      <unknown>Sometext</unknown> 
     </unknown> 
     <unknown> 
      <unknown>Sometext</unknown> 
     </unknown> 
     <unknown> 
      <unknown>Sometext</unknown> 
     </unknown> 
     .... 
    </unknown> 
</unknown> 

나는이 시나리오에서 알 수없는 클래스가 가장 가까운 요소 (공통 부모를) 좀하고 싶습니다

. 나는 실제 태그 나 클래스 이름을 모른다. 나는 둥지 요소가 "본질적"을 포함한다는 것을 알고 있습니다. jQuery/Javascript를 사용하여 루프를 통해이 작업을 수행 할 수 있다는 것을 알고 있지만 jQuery와 함께 사용할 수있는 CSS 선택기가 있습니까? closest(), parents(), parentsUntil()의 조합을 사용하여 시도했지만이 요소에 연결할 수없는 것 같습니다.

감사합니다.

Answer 1

첫째, 당신은 당신 만 리프 노드 (자식 노드와 노드)를 일치 확인, 그래서 사용할 필요가 (그냥 잎 노드), 사용 :

var matches = $(':not(:has(*))').filter(function() { 
    return $(this).text() == "Sometext"; 
}); 

또는 단지 결합을 사용하여 (0 어린이를위한 추가 검사 포함) 모든 요소에 D 필터 :

var matches = $('*').filter(function() { 
    return !$(this).children().length && $(this).text() == "Sometext"; 
}); 

참고 :은 아직이 두 가지 옵션 중 가장 빠른 인 테스트하지 않았습니다.

var commonparent = matches.first().parents().filter(function() { 
    return $(this).find(matches).length == matches.length; 
}).first(); 

JSFiddle :http://jsfiddle.net/TrueBlueAussie/v4gr1ykg/

여기에 데이비드 토마스의 제안에 기초

그러면 당신은 모든 경기를 포함, (첫 경기의) 최초의 조상을 찾을 필요 앞으로는 사람들에게 유용 할 수있는 jQuery 확장 (commonParents() 및 commonParent()) 쌍이 될 것입니다.

JQuery와 컬렉션 사용 'commonParents의 월 부모() :

$.fn.commonParents = function(){ 
    var cachedThis = this; 
    return cachedThis.first().parents().filter(function() { 
     return $(this).find(cachedThis).length === cachedThis.length; 
    }); 
}; 

JSFiddle : (commonParents는) :

$.fn.commonParent = function(){ 
    return $(this).commonParents().first(); 
}; 

: http://jsfiddle.net/TrueBlueAussie/v4gr1ykg/3/

는 jQuery를 수집 사용의 가장 가까운 공통 부모 commonParent()를 찾으려면

JSFiddle : (commonParent) :http://jsfiddle.net/TrueBlueAussie/v4gr1ykg/2/

주 :

• jQuery를이 commonParentsfilter()으로 commonParent에 first()의 결합 된 사용을 최적화하고 단지 commonParents의 코드를 호출하는 첫 번째 일치가되어까지 , 그래서 commonParent가 될 필요가 없습니다 더 효율적입니다.

Answer 2

이 작업을 수행해야합니다. 당신은 기본적으로 모든 일치하는 요소의 모든 관련 부모를 찾고, 그 각각의 집합의 교차점을 얻은 다음 가장 중첩 된 공통 부모를 얻기 위해 첫 번째 것을 가져옵니다.

jquery 플러그인처럼 포장 할 수도 있습니다. 그래서

:not(:has(*)) 

모든 정확히 일치를 찾을 수 :

if(console && console.clear) console.clear(); 
 

 
// create a handy intersection method for Arrays 
 
// see http://stackoverflow.com/a/16227294/1901857 
 
Array.prototype.intersect = function(arr) { 
 
    var a = this, b = arr; 
 
    var t; 
 
    if (b.length > a.length) t = b, b = a, a = t; // indexOf to loop over shorter 
 
    return a.filter(function (e) { 
 
     return b.indexOf(e) > -1; 
 
    }); 
 
}; 
 

 
;(function($) { 
 
    $.fn.commonParents = function(selector) { 
 
     // find all relevant parents for each element and get set intersection 
 
     // pushStack means you can use end() etc in chaining correctly 
 
     return this.pushStack(sometexts.get().reduce(function(prevParents, el) { 
 
      // common parents for this element - note the lowest level parent is first 
 
      var parents = $(el).parents(selector || '*').get(); 
 

 
      // intersect with the previous value (or itself if first) 
 
      return (prevParents || parents).intersect(parents); 
 
     }, null), "commonParents", arguments); 
 
    }; 
 
})(jQuery); 
 

 

 
// text to search for 
 
var search = "Sometext"; 
 
// parent selector to filter parents by e.g. '.unknown' - use null for all parents 
 
var parentSelector = null; 
 

 
// find everything containing search 
 
var sometexts = $(":contains('" + search + "')").filter(function() { return $(this).text() == search; }); 
 

 
// grab the first common parent - the lowest level one - or null if there isn't one 
 
var commonParent = sometexts.commonParents(parentSelector).get(0); 
 

 
console.log(commonParent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="unknown test"> 
 
     <div class="unknown test2"> 
 
      <div class="unknown"> 
 
       <div>Sometext</div> 
 
      </div> 
 
      <div> 
 
       <div>Sometext</div> 
 
      </div> 
 
      <div> 
 
       <div>Sometext</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>