2012-04-11 5 views
0

저는 JQuery로 조작하고있는 계층 적 데이터가 있습니다. 트리의 어떤 요소가 선택되었는지 시각적으로 표시하려고합니다.JQuery : has(), children 만 선택해야합니다.

<li> 
    <input class="selectedcheck" checked disabled type="checkbox" name="ign-130"> 
    <input class="millermultiselect" type="checkbox" name="chk-130"> 
    <a href="#" data-parent="6" data-nodename="Egypt" data-self="130">Egypt</a> 
    <ul> 
      <li> 
       <input class="selectedcheck" checked disabled type="checkbox" name="ign-131"> 
       <input class="millermultiselect" type="checkbox" name="chk-131"> 
       <a href="#" data-parent="130" data-nodename="Cairo" data-self="131">Cairo</a> 
      </li> 
    </ul> 
</li> 

이 모든 사업부 번호 밀러 내에 존재 : 여기에 (우리가 조작하는) 내가 생성하고있는 HTML의 샘플입니다. 첫 번째 확인란 (.selectedcheck)은 영역이 선택되었음을 표시하는 데에만 사용됩니다 (숨김 상태로 시작하고 부모 영역이 선택되면 표시되므로 이집트에서 .millermultiselect를 클릭하면 카이로의 .selectedcheck Cairo의 .millmulticlectlect를 대신하여 눈에 띄게 될 것입니다.) 내가 뭘하고 싶은 것은 또한 체크 박스를 직접 자식으로 포함하고있는 모든 li에 클래스를 추가하는 것이다. 나는 다음과 같은 jQuery 코드로이를 시도하고있다 :

$("#miller li:has(input:checkbox:checked:visible)").addClass('chosen'); 

오전 데 문제는 모든 지역이 어느 지역에있는 체크 상자를 선택, 중첩 된 상향 링크의로 구성되어 있기 때문에도에 .chosen 추가하는 것입니다 나무의 더 높은 어떤 li .... 그래서 카이로의 체크 박스를 클릭하는 것은 이집트와 아프리카에 .chosen 학급을 더한다.

누구나 눈에 보이는 체크 박스가있는 아이를 캡처하는 방법에 대해 어떻게 생각합니까?

$(document).ready(function() { 
    $(".selectedcheck").hide(); 
    showSelected = function(){ 
     $("#miller li").removeClass("chosen"); 
     $("#miller li:has(input:checkbox:checked:visible)").addClass('chosen'); 
    }; 
    $("#miller a").click(function(event) { 
     event.preventDefault(); 
     $("#miller li").removeClass("selected"); 
     $(this).parent().addClass("selected"); 
     data = $(this).data(); 
     $("#addChild").attr("href", "addChild.php?parentid=" + data.self).html("Add item under " + data.nodename); 
     $("#addSibling").attr("href", "addChild.php?parentid=" + data.parent).html("Add item next to " + data.nodename); 
     $("#editRegion").attr("href", "editRegion.php?id=" + data.self).html("Edit " + data.nodename); 
     $("#deleteRegion").attr("href", "deleteRegion.php?id=" + data.self).html("Delete " + data.nodename); 
     $("#addResort").attr("href", "addResort.php?regionid=" + data.self).html("Add resort to " + data.nodename); 
     $("#miller ul ul").hide(); 
     $(this).parents("#miller ul").show(); 
     $(this).siblings("#miller ul").show(); 
     showSelected(); 
    }); 
    $("#miller .millermultiselect").click(function(event) { 
     $("#miller li").removeClass("selected"); 
     $(this).parent().addClass("selected"); 
     $("#miller ul ul").hide(); 
     $(this).parents("#miller ul").show(); 
     if($(this).is(':checked')) { 
      $(this).parent().find(".millermultiselect").not(this).hide(); 
      $(this).parent().find(".millermultiselect").not(this).removeAttr("checked"); 
      $(this).parent().find(".selectedcheck").show(); 
     } else { 
      $(this).parent().find(".millermultiselect").not(this).show(); 
      $(this).parent().find(".selectedcheck").hide(); 
     } 
     $(this).siblings(".selectedcheck").hide(); 
     $(this).siblings("#miller ul").show(); 
     showSelected(); 
    }); 
}); 

답변

2

당신은 직계 후손 선택기를 사용할 수 있습니다 후 부모의 수 :

$("#miller li > input:checkbox:checked:visible").parent().addClass("chosen"); 
+0

정확히 내가 찾고 있었던 것이 었습니다. 나는 내 두뇌가 오늘 제대로 작동하지 않는다고 확신한다. –

1

것은 내가 갈 것입니다 방법은 다음과

그냥 통찰력을 제공하는 경우에 내 전체의 js 파일입니다 직접 보이는 아이가 보이는 체크 박스가있는 리의 캡처에 대해서만?

문제를 되 돌리는 것은 어떻습니까?

$('input:checkbox').is(':visible').is(':checked').parent('li') 
관련 문제