在jQuery中分组选定的孩子

Question

这已经是一件容易的事了...

我有一个列表。我想在每个列表项中显示一个元素，并且可以选择查看更多（如果有的话）。就像这样：

<li class="item"> 
    <div class="elementToShow">Shown Element</div> 
    <div class="elementsToBeHidden">Hidden Element</div> 
</li> 
<li class="item"> 
    <div class="elementToShow">Shown Element</div> 
</li> 
<li class="item"> 
    <div class="elementToShow">Shown Element</div> 
    <div class="elementsToBeHidden">Hidden Element</div> 
</li> 

然后我想在jQuery中添加一个按钮来揭露其他元素：

$('.item).children('.elementsToBeHidden') 
    .wrapAll('<div class="hiddenElements"></div>'); 
$('<a class="hiddenElements"> See More </a>') 
    .appendTo($('.hiddenElements')) 
    .click(function() { 
    $('.elementsToBeHidden').slideToggle('slow'); 
    }); 

这一点，虽然，组中的所有第一个列表项下的隐藏要素。

如果我想显示第一个项目中的第一个隐藏元素和第三个项目中的第三个元素，缺少什么？

预先感谢您的帮助。

Answer 1

为什么他们在上课时打包呢？

试试这个：http://jsfiddle.net/GEJ29/2/

$('.item:has(.elementsToBeHidden)').append('<a class="hiddenElements"> See More </a>') 
    .find('a').click(function() { 
    $(this).siblings('.elementsToBeHidden').slideToggle('slow'); 
});​ 

或同样的事情，但在我看来好一点：

http://jsfiddle.net/GEJ29/3/

$('<a class="hiddenElements"> See More </a>').appendTo('.item:has(.elementsToBeHidden)') 
    .click(function() { 
     $(this).siblings('.elementsToBeHidden').slideToggle('slow'); 
});​ 

---

原来的答复：

您想单独对每个<li>进行操作。

试试这个：http://jsfiddle.net/wQ2V6/

$('.item').each(function() { 
    $(this).children('.elementsToBeHidden') 
     .wrapAll('<div class="hiddenElements"></div>'); 

    $('<a class="hiddenElements"> See More </a>') 
     .appendTo($(this).find('.hiddenElements')) 
     .click(function() { 
      $(this).siblings('.elementsToBeHidden').slideToggle('slow'); 
     }); 

});