JQuery срезать назад или выбрать 5 предыдущих братьев и сестер

0

Я езжу на велосипеде через серию div, поэтому только 5 появляются за раз, используя метод slice(). После каждого 4-го элемента есть ссылка с эллипсисом (...), которая напрямую приводит пользователя к следующему набору из 5 элементов. Вот как это выглядело бы со всеми показами, а не только с 5, если вы в замешательстве.
<1 2 3 4... 5 6 7 8... 9 10 11 12... 13 14 15 16>

Когда пользователь нажимает на стрелку назад, я хочу, чтобы предыдущие 5 divs отображались. Например, если они находятся во втором наборе из 5 (div 5, 6, 7, 8,...), нажатие на стрелку назад скроет их и покажет предыдущие 5 (div 1, 2, 3, 4,...). Я не думаю, что slice() работает в обратном порядке, а prev() не будет работать, так как я не знаю, как выбрать предыдущих 5 братьев и сестер. Nth-child не будет работать, потому что я хочу выбрать предыдущие 5, а не только: nth-child (5n).

Любые мысли о том, как это может работать? Я в тупике. Я не JQuery Jedi, но я бы сказал, что мой текущий уровень навыков выше новичка. Я, вероятно, делаю функциональность более сложной, чем она должна быть. Я сделал скрипку, показывая, что я уже сделал.
https://jsfiddle.net/nehLuj98/

$(".btn-nav").slice(0,5).show();
$(".btn-ellipsis").each(function(){
    var goNum = $(this).prev(".btn-num");
    var num = Number(goNum.attr("id"));
    var currentNum = $(this).find(".current");
    $(this).click(function(){
        $(this).hide();
        $(".btn-num").hide().slice(num,(num+4)).show().next(".btn-ellipsis").show();
        $(this).next(".current").removeClass("current");
        $(".btn-num").hide().slice(num,(num+4)).show().next(".btn-ellipsis").show();
        goNum.add("#"+(num+1)+"").addClass("current");
    });
    $(".btn-prev").click(function(){
        //Here where I'd like to add the functionality to show the previous 5 items
        //$(".btn-nav").add(".btn-ellipsis").hide();
    });
});

Я использую AngularJS, поэтому эти числа создаются динамически на основе файла.json. Не знаю, подходит ли это или нет. Эллиптическая связь вставляется после каждой четвертой нумерованной ссылки, потому что количество ссылок может очень сильно. Для скрипки я просто добавил ее в html для простоты.

TL; DR
Есть ли способ использовать метод jQuery slice() назад или выбрать предыдущих 5 братьев и сестер, используя другой метод?

  • 0
    Вне головы без тестирования, используя уже $(".btn-num").hide().slice((num-4),num).show() код, может быть что-то вроде: $(".btn-num").hide().slice((num-4),num).show() может понадобиться -5 и -1

1 ответ

0
Лучший ответ

На основе вашего текущего кода вы можете сделать это:

$(".btn-prev").click(function(){
    if ($('.current').attr('id') === '1' || $('.current').attr('id') === '4')
    return;
  var currentElip = $('.btn-ellipsis:visible');
    if (!currentElip.length)
    currentElip = $('.btn-next');
  else
    currentElip.hide();
  var goNum = currentElip.prevAll('.btn-ellipsis').prev(".btn-num");
  var num = Number(goNum.attr("id"));
  $(".btn-num").hide().slice(num-4,(num)).show().next(".btn-ellipsis").show();
    $(".current").removeClass("current");
    $("#"+(num)).addClass("current");
});

Вот скрипка с некоторыми комментариями:

https://jsfiddle.net/nehLuj98/10/

  • 0
    Это сработало! Большое спасибо, Джо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню