代码之家  ›  专栏  ›  技术社区  ›  lazysoundsystem

在jquery中对所选子项进行分组

  •  1
  • lazysoundsystem  · 技术社区  · 14 年前

    这一定很简单…

    我有一张单子。我想在每个列表项中显示一个元素,并提供一个查看更多内容的选项(如果有)。这样地:

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

    不过,这会将所有隐藏元素分组到第一个列表项下。

    如果我想在第一个项目中显示第一个隐藏元素,在第三个项目中显示第三个隐藏元素,那么缺少什么?

    感谢您的帮助。

    1 回复  |  直到 14 年前
        1
  •  2
  •   user113716    14 年前

    他们上课的时候为什么还要缠着呢?

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