2012-04-11 116 views
0

我有我用JQuery操作的一些分層數據,我試圖添加一些類型的視覺指示,說明我的樹中哪些元素被選中。這裏是我生成HTML的樣本(我們正在操縱):JQuery:有(),我只需要選擇兒童

<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> 

所有這一切都位於一個div#米勒之內。第一個複選框(.selectedcheck)僅用於顯示選擇了一個區域(它開始隱藏,並且在選擇父區域時顯示,所以如果您在埃及點擊.millermultiselect,開羅的.selectedcheck將成爲可見,取代開羅的.millermultiselect)。我想要做的也是添加一個類到任何包含(作爲一個直接孩子)複選框的李。我試圖用下面的jQuery代碼來實現:

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

是我遇到的問題是,由於所有的區域都是由嵌套UL的的,檢查的任何區域中的複選框,還增加了.chosen到樹中的任何一個更高...因此單擊開羅的複選框會將.chosen類添加到埃及和非洲。

任何人都有一個想法,我將如何去捕獲李的有一個可見的複選框作爲一個直接的孩子?

這裏是我的整個js文件,以防萬一它提供了深入瞭解:

$(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

這正是我所期待的。我很確定我的大腦今天沒有工作。 – 2012-04-11 16:04:07

1

我怎麼會去關於只捕獲具有可見的複選框作爲直接孩子的李?

如何解決問題?

$('input:checkbox').is(':visible').is(':checked').parent('li')