Как мне обрезать длинный неупорядоченный список с помощью Jquery?

Question

Я использую WordPress для отображения списка категорий, отсортированных по алфавиту. Я хочу использовать jQuery, чтобы добавить ссылку «читать дальше» после первых 20 ссылок. Когда пользователь нажимает «читать дальше», остальные категории скользят вниз / появляются. Формат HTML списка ниже:

<ul id="catA">
    <h2>Categories</h2>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    ...
</ul>

Я хочу, чтобы <a href="#">view all categories</a> был добавлен в список после 20-й категории и скрыл все после этого. Прежде чем я попытаюсь написать какой-нибудь код, есть какие-нибудь мысли о том, как лучше всего это сделать?

Answer 1

Я бы сделал это так:

$('ul#catA').children('li').each(function (i)
{
    if (i > 19)
    {
        $(this).hide();   
    }
});

var more = $('<li class="cat-item"><a href="">Show More</a></li>');
$('ul#catA').append(more);

more.find('a').on('click', function (){
   $(this).parent().siblings('li').show();

   return false; 
});

Вот jsfiddle , показывающий мой метод в действии.

---

Я создал обновленный jsfiddle на основе рекомендации @ nachito по использованию селектора :gt().Я также добавил несколько комментариев, объясняющих, что происходит.

// creating the new 'Show More' link
var more = $('<li class="cat-item"><a href="">Show More</a></li>');

// hiding all lis after the first two
$('ul#catA').children('li:gt(1)').hide();

// adding the 'Show More' link
$('ul#catA').append(more);

// binding a click event to 'Show More'
more.find('a').on('click', function (){        
   // hiding 'Show More' and showing the rest of the lis in this ul 
   $(this).parent().hide().siblings('li').show();

   // preventing default action and event bubbling
   return false; 
});

Answer 2

Я бы нашел 20-й элемент li, используя селектор : eq () (отметив, что он индексирован с нулями ), добавив ссылку «Просмотреть все» после него, затем используйте селектора : gt () для выбора и скрытия ваших дополнительных элементов li. Вам нужно будет прикрепить обработчик событий к вашей ссылке «Просмотреть все», которая показывает скрытые ли и удаляет себя.

Answer 3

Это простейшее решение, но оно может работать:

• Позвольте ссылке «просмотреть все», созданной после списка, присвоить ей идентификатор, например «# catA-viewall»;
• Скрыть все элементы;
• Показывать только первые 20;

• При нажатии «Просмотреть все» мы показываем все элементы.

  var $items = $('#catA').children();
  if ( $items.length > 20 ) {
      $items.hide().slice(0, 20).show();
      $('#catA-viewall').click(function () {
          $items.fadeIn(); // or .show()
          $(this).remove();
      });
  } else {
      $('#catA-viewall').remove();
  }