選擇jQuery中的選擇元素

Question

我想用jQuery選擇一個元素。

<ul> 
    <li><label><input type="checkbox" class="checkbox">checkbox1</label></li> 
     <ul class="list"> 
      <li>lorem</li> 
      <li>lorem</li> 
      <li>lorem</li> 
     </ul> 
    <li><label><input type="checkbox" class="checkbox">checkbox2</label></li> 
     <ul class="list"> 
      <li>lorem</li> 
      <li>lorem</li> 
      <li><lorem/li> 
     </ul> 
</ul> 

我想隱藏並顯示列表，直接在1複選框下的jQuery函數。

$(".list").hide(); 

$(".checkbox").click(function() { 

    if ($(".checkbox").is(":checked")) 
    { 
     $("????").show('slow'); 
    } 
    else 
    { 
     $("????").hide('slow'); 
    } 
}); 

的????需要成爲一個選擇器（僅）選擇複選框下的列表。

Answer 1

首先，jQuery的文檔，你的HTML是很容易穿過你的結構無效，因爲li之間不能有ul之間的元素。你的HTML改成這樣：

<ul> 
    <li> 
     <label><input type="checkbox" class="checkbox">checkbox1</label> 
     <ul class="list"> 
      <li>lorem</li> 
      <li>lorem</li> 
      <li>lorem</li> 
     </ul> 
    </li> 
    <li> 
     <label><input type="checkbox" class="checkbox">checkbox2</label> 
     <ul class="list"> 
      <li>lorem</li> 
      <li>lorem</li> 
      <li><lorem</li> 
     </ul> 
    </li> 
</ul> 

然後你可以使用cloest父li作爲上下文尋找相關ul：

$(".list").hide(); 

$(".checkbox").click(function() { 
    var $parentLi = $(this).closest("li"); 
    if ($(this).is(":checked")) { 
     $("ul", $parentLi).show('slow'); 
    } 
    else { 
     $("ul", $parentLi).hide('slow'); 
    } 
}); 

Answer 2

您可以

$(this).parents('li').children('.list').show('slow'); 

有可能是做這件事的更多succint方式，如果你閱讀選擇&穿越

Answer 3

快速回答：

$(".checkbox").click(function() { 

    if ($(".checkbox").is(":checked")) 
    { 
     $(this).next('ul').show('slow'); 
    } 
    else 
    { 
     $(this).next('ul').hide('slow'); 
    } 
}); 

然而，由於尖頭你的HTML無效，子女<ul>應該在<li>之內。

此外，根據複選框的初始可見性/狀態，您可以使用$(this).next('ul').toggle('slow');而不是選中複選框檢查狀態來縮短代碼。

Answer 4

http://jsfiddle.net/Y7WDJ/一個你想要的簡單版本。它選擇下一個.list元素，並在點擊複選框時切換它。