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

});

在jQuery中对选定的子组进行分组

1 个答案: