Как добавить элемент несколько раз (slidingdown)

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я хочу добавить 5 li элементов, когда я нажимаю на div с помощью class moree . Он работает правильно, но когда я нажимаю на «Еще», я хочу добавить эти кнопки в конец списка. Теперь элементы находятся в стадии попрошайничества. Кроме того, есть ли способ добавить с эффектом slidingdown? Вот мой фрагмент:

 $(document).ready(function () {
   for (var i = 0; i < 5; i  ) {
        $(".moree").click(function () {
             $(this).closest('.content').append('<ol ><li>Title 2</li></ol>');
        });
   }  

});

 ol > li { 
   list-style:none; 
   padding-top:10px; 
   border:1px solid green;
   margin-top:10px;
}
.moree { 
   width:30px; 
   background:yellow;
}

 <html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="content">
    <ol>
    <li>title</li>
     <div class="moree">Add 5</div>
    </ol>
    </div>
</body>
</html>

Спасибо.

1. Используйте prepend(... вместо append(... .

2. @DavidDomain есть ли способ добавить с эффектом скольжения вниз?

3. Ваш HTML неверен. Вы не можете иметь a div в качестве прямого дочернего элемента ol .

Ответ №1:

Вы это имели в виду? Это лишь немного улучшило ваш пример с анимацией скольжения вниз.

 $(document).ready(function () {
  $(".moree").click(function () {
    var delay = 0;
    for (var i = 0; i < 5; i  ) {              
      $(this)
        .prev()
        .append('<li style="display:none">Title 2</li>')
        .children()
        .last()
        .hide()
        .delay(delay)
        .slideDown(400);
      delay  = 400;
    }
  });
});

 ol > li{ list-style:none; padding-top:10px; border:1px solid green;margin-top:10px;}
.moree{ width:30px; background:yellow;}

 <html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="content">
      <ol>
        <li>title</li>
      </ol>
      <div class="moree">Add 5</div>
    </div>
</body>
</html>

Ответ №2:

Во-первых, вы должны переместить класс «moree» за пределы упорядоченного списка.

 <html>
<head>
</head>
<body>
 <div class="content">
  <ol>
   <li>title</li>
  </ol>
  <div class="moree">Add 5</div>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

После этого в jquery переместите цикл for внутрь функции click .

Для достижения эффекта скольжения сначала нам нужно скрыть элемент, который мы должны добавить, а затем мы используем функцию «appendTo ()» для добавления к родительскому элементу, а затем мы можем использовать функцию «show ()» для перемещения добавленного списка.

 $(document).ready(function () {
        $('.moree').on('click', function(){
            for(var i=0; i<5; i  ){
                $('<li>Title 2</li>').hide().appendTo('ol').show("slow");
            }
        });
    });

Ответ №3:

Вместо добавления 5 элементов списка вы добавили прослушиватель событий щелчка 5 раз к одному и тому же элементу.

Вероятно, это то, что вы хотите вместо этого:

 $(document).ready(function() {
  $(".moree").on('click', function() {
    for (var i = 0; i < 5; i  ) {
      $(this).closest('.content').find('ol').append('<li class="no-height">Title '   i   '</li>');
    }
    window.setTimeout(function() { $('li.no-height').removeClass('no-height'); }, 5);
  });
})

 ol > li {
  list-style: none;
  padding-top: 10px;
  border: 1px solid green;
  margin-top: 10px;
  height: 40px;
  overflow: hidden;
  transition: all 0.4s ease;
}
ol > li.no-height {
  height: 0;
  padding: 0;
  border: 0;
}
.moree {
  width: 30px;
  background: yellow;
}

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <div class="content">
    <ol>
      <li>title</li>
    </ol>
    <div class="moree">Add 5</div>
  </div>

1. есть ли способ добавить с эффектом скольжения вниз?

2. Вы могли бы сделать это с помощью CSS-переходов. Я отредактирую свой ответ, чтобы показать, как это сделать.

3. Отредактировано. «Анимация» теперь работает как переход — техника, о которой вы, возможно, еще не знали.

Ответ №4:

Здравствуйте, попробуйте этот код jQuery, надеюсь, он вам поможет

        $(document).ready(function () {
       for (var i = 0; i < 5; i  ) {
        $(".moree").click(function () {
            $(this).closest('.content').prepend('<ol ><li>Title 2</li>   
        </ol>');
        });
         }  

         })

попробуйте следующую скрипку
DemoFiddle
надеюсь, это поможет