jQuery - 하위 클래스로 상위 항목을 선택 하시겠습니까?

Question

<div class="test"> 자식을 포함하는 <tr>을 어떻게 선택할 수 있습니까?

<table> 
<tr> <!-- this tr is what I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
</table> 

Answer 1

당신은 그것에 대해 parents 또는 closest을 사용할 수 있습니다, 필요에 따라 :

는

$("div.test").parents("tr"); 
// Or 
$("div.test").closest("tr"); 

(초기 선택은 div 일치하는 것도, 그래서 ".test"이 너무 잘 될 것입니다 될 수 있습니다.)

parents은 테이블 내에서 테이블을 가지고있는 경우 여러개의 tr 요소와 일치하는 트리 전체를 보일 것입니다. closest은 각각 div에 대해 만나는 첫 번째 tr으로 중지됩니다. |

Live copy :

여기 closest를 사용하여 예제 Live source

HTML :

<table> 
<tr id="first"> <!-- this tr I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
<tr id="second"> <!-- this tr I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
<tr id="third"> <!-- this tr I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
</table> 

자바 스크립트 :

jQuery(function($) { 

    var rows = $("div.test").closest("tr"); 
    display("Matched " + rows.length + " rows:"); 
    rows.each(function() { 
    display("Row '" + this.id + "'"); 
    }); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

출력 :

Matched 3 rows: 
Row 'first' 
Row 'second' 
Row 'third'

Answer 2

$('.test').parent('tr') 

이 정확하게 당신이 원하는 것을 선택합니다.

Answer 3

$('.test').parent().parent(); 또는 $('.text').parent().closest('tr');

Answer 4

당신은 예를 들어

$('.test').parents('tr'); 

사용해야합니다

http://jsfiddle.net/7T9nN/

Answer 5

아래 어딘가에 그 아이 내와의 .test의 클래스와 부모를 대상으로 아래 예는 배경을 빨간색으로 변경합니다 ...

$(document).ready(function(){ 
$('.test').parents('tr').css('background-color', 'red'); 
}); 

나를 위해 indesign에서 내 보낸 HTML을 대상으로 할 때 이것은 매우 강력합니다. 강력한 디자인으로 인해 태그를 사용할 수 없지만이 태그를 통해 태그를 추가 한 다음이 JQuery를 통해 태그를 지정할 수 있습니다.

Answer 6

사용 선택 :

$("tr:has(div.test)"); 

하는 :has() Selector

여기 jQuery를 문서 찾기 : 등) (이