选择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元素，并在点击复选框时切换它。