在 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');
});​

---

原始答案：

您想单独对每个

进行操作。

试试这个： 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');
        });

});