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

});