Группировка выбранных детей в 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');
        });

});