如何多次追加元素（向下滑动）
[英]How to append element multiple times (slidingdown)
问题描述
I want to append 5 li elements when I click to div with class moree . 
我想在moree类中单击div时添加5个li元素。 It's working correctly, but when I click to more I want to add those buttons at the end of the list. 它工作正常，但是当我单击更多按钮时，我想在列表末尾添加这些按钮。 Now the items are at the begging. 现在这些物品正在乞讨中。 Furturmore is there a way to append with effect slidingdown? Furturmore是否可以添加滑倒效果？ Here is my snippet: 这是我的片段：
$(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>
Thanks. 谢谢。
4 个解决方案
解决方案1
2 已采纳
Did you mean this? 你是这个意思吗 Its only slightly improved your example with slide down animation. 向下滑动动画仅稍微改善了您的示例。
$(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
2 2016-10-02 08:56:31
First, you should move "moree" class outside of the ordered list. 首先，您应该将“ 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>
After that, in the jquery, move the for loop inside of the click function. 之后，在jquery中，将for循环移动到click函数内部。
For the sliding effect to achieve, first we have to hide the element that we have to append, and then we use "appendTo()" function to append to the parent element and then we can use the "show()" function to slide the appended list. 为了实现滑动效果，首先我们必须隐藏必须添加的元素，然后使用“ 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
1 2016-10-02 08:45:44
Instead of adding 5 list items, you added a click event listener 5 times to the same element. 您没有添加5个列表项，而是向同一元素添加了5次click事件监听器。
This is probably what you want instead: 这可能是您想要的：
$(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>
解决方案4
0 2016-10-02 08:47:24
Hello try this JQuery code Hope It helps you 您好，请尝试以下JQuery代码希望对您有所帮助
$(document).ready(function () {
for (var i = 0; i < 5; i++) {
$(".moree").click(function () {
$(this).closest('.content').prepend('<ol ><li>Title 2</li>
</ol>');
});
}
})
try the below Fiddle DemoFiddle hope it helps 尝试下面的小提琴演示小提琴希望它可以帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.