提问人:S.S 提问时间:6/8/2021 最后编辑:Rory McCrossanS.S 更新时间:6/8/2021 访问量:59
div 列表,插入到其他 div 的位置
List of divs, inserting at additional div at location
问:
我有一个 div 列表,我希望在按下按钮时包含另一个 div。这个位置可以是随机的,即在起点、中间或底部。
我尝试了很多方法,但无法理解。如果有人能帮忙,将不胜感激。
我包括一个小样本:
$(document).ready(function() {
$("#btn2").click(function() {
// This could be inserted at any point, i.e, start, middle or last;
$(".bbc div").eq(2).prepend("<div>Appended item</div>");
});
$(".bbc div").click(function() {
// On click return the eq() of the item;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="bbc">
<div>List item 1</div>
<div>List item 2</div>
<div>List item 3</div>
<div>List item 4</div>
</div>
<button id="btn2">Append list items</button>
答:
-2赞
Barish Namazov
6/8/2021
#1
由于您使用的是 jQuery,请尝试 insertBefore()。
评论
0赞
charlietfl
6/8/2021
在什么之前?仅链接的答案在这里并不受欢迎。查看如何回答
0赞
O.kamili
6/8/2021
#2
这应该可以完成工作
document.getElementById('btn2').addEventListener('click', insertRandom);
function insertRandom() {
const MAINPARENT = document.getElementsByClassName('bbc')[0],
childsNum = MAINPARENT.querySelectorAll('div').length,
randomPlace = Math.floor(Math.random() * (childsNum+1));
let elem = document.createElement('div');
elem.innerHTML = "NEW!!!!";
if(randomPlace > childsNum){
MAINPARENT.appendChild(elem);
}
MAINPARENT.insertBefore(elem, MAINPARENT.querySelectorAll('div')[randomPlace]);
}
<div class="bbc">
<div>List item 1</div>
<div>List item 2</div>
<div>List item 3</div>
<div>List item 4</div>
</div>
<button id="btn2">Append list items</button>
0赞
Abhishek K
6/8/2021
#3
您可以使用在随机位置进行预置Math.random()
$("#btn2").click(function(){
const divLength = $(".bbc div").length;
const randomInteger = Math.floor(Math.random() * divLength) + 1
$(".bbc div").eq(randomInteger).prepend("<div>Appended item</div>");
});
更新的解决方案:https://www.w3schools.com/code/tryit.asp?filename=GRAA36XMXJUH
评论