2014-07-08 2 views
2

하위 클래스 중 하나 (a.selectable)에 특정 클래스 (selectedLink)가있는 한 테이블 행을 강조 표시하려고합니다. a.selectable 요소에 언급 된 클래스가있는 한 강조 표시 할 행을 받았습니다. 그러나 a.selectable 요소 하나가 selectedLink 클래스 인 경우 제대로 작동하지 않습니다. 이는 내 목표입니다. 두 번째 행에 http://jsfiddle.net/Ly4WL/51/ 두 행이 강조하는 a.selectable 요소를 클릭해야하며 자손 a.selectable 요소의 클래스 selectedLink이 있다면 나는 일을하고 싶습니다 :jQuery addClass 적어도 하나의 하위 클래스에 클래스가있는 한

는 여기에 문제의 jsfiddle입니다.

<table> 
    <tr> 
     <td><a class="selectable" href="[email protected]">Joe</a></td> 
     <td>Joes Program</td> 
     <td>Date</td> 
    </tr> 
    <tr> 
     <td><a class="selectable" href="[email protected]">Jane</a></td> 
     <td><a class="selectable" href="[email protected]">Jane's Program</a></td> 
     <td>Date</td> 
    </tr> 
</table> 

, 내가이 jQuery를 사용하고 셀 및 행을 강조 표시 :

$('a.selectable').click(function(event) { 
    event.preventDefault(); 
    //highlight link and rows 
    $(this).toggleClass('selectedLink'); 
    $(this).parents('tr').has('a.selectedLink').removeClass('selectedRow'); 
    $(this).parents('tr').has('a.selectedLink').addClass('selectedRow'); 
    $(this).parents('tr').has('a:not(.selectedLink)').removeClass('selectedRow'); 
}); 

답변

0

문제는 is() 달리, .has()jQuery 개체를 반환되는 것을

표는 다음 형식을 따릅니다 (부울이 아닌) 길이를 확인해야합니다.

$('a.selectable').click(function (event) { 
    event.preventDefault(); 
    $(this).toggleClass('selectedLink'); 
    if ($(this).closest('tr').has('a.selectedLink').length) 
     $(this).closest('tr').addClass('selectedRow'); 
    else 
     $(this).closest('tr').removeClass('selectedRow'); 
}); 

Demo

+0

아. '. 길이'에 대한 필요성은 나를 위로하고 있었던 것을 이해합니다. – Marcatectura

관련 문제