• Как клонировать элемент списка «li» несколько раз с инкрементными идентификаторами и значениями

    49 просмотра

    1 ответ

    Мне нужно создать автоматическую полосу разбивки на страницы, которая загружает ее максимум из переменной с именем number, например:

    число = 5

    это моя начальная панель разбивки на страницы:

    <ul class="pagination">
    
      <li class="page" name="1"><a href="#" class="is-active">1</a></li>
      <li class="page" name="2"><a href="#">2</a></li>
    
    </ul>
    

    Мне нужно клонировать "li" с именем = 2 и создать 3 других "li" с инкрементным именем и содержимым, чтобы получить наконец эту форму:

    <li class="page" name="1"><a href="#" class="is-active">1</a></li>
    <li class="page" name="2"><a href="#">2</a></li>
    <li class="page" name="3"><a href="#">3</a></li>
    <li class="page" name="4"><a href="#">4</a></li>
    <li class="page" name="5"><a href="#">5</a></li>
    

    Так как же выбрать второй «li», клонировать его и создать следующий «li» с инкрементными именами и значениями?

    createPagination:function (number) {
    
    }
    
    Автор: firasKoubaa Источник Размещён: 08.11.2019 11:28

    Ответы (1)


    0 плюса

    Решение

    Вы можете получить последний li, а затем использовать forцикл для увеличения имени (номера) последнего liи создания клонов. После этого вы можете установить имя каждого клона в качестве текущего значения счетчика в цикле (также то же самое для текста aэлемента в li) и добавить его к ul.

    var last = $('.pagination li').last();
    var num = last.attr('name');
    
    for (var i = num; i <= 5; i++) {
      if (i != num) {
        var clone = last.clone().attr('name', i);
        $(clone).find('a').text(i);
        $('ul').append(clone);
      }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="pagination">
      <li class="page" name="1"><a href="#" class="is-active">1</a></li>
      <li class="page" name="2"><a href="#">2</a></li>
    </ul>

    Автор: Nenad Vracar Размещён: 20.08.2016 03:18
    Вопросы из категории :
    32x32