div 列表,插入到其他 div 的位置

List of divs, inserting at additional div at location

提问人:S.S 提问时间:6/8/2021 最后编辑:Rory McCrossanS.S 更新时间:6/8/2021 访问量:59

问:

我有一个 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>

JavaScript HTML jQuery

评论

2赞 freedomn-m 6/8/2021
您在哪个部分遇到困难?代码如何知道它应该是开始、中间还是最后?你在寻找一个随机数生成器吗?
0赞 Barish Namazov 6/8/2021
当前代码将所有 div 插入到另一个 div 中,我想这不是 OP 想要的。

答:

-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