Javascript 随机化一行中的4个div元素；JQuery

我一行有4个div元素（它们是卡片）。我需要在每一页上混合这些div。我怎样才能把它们混在一起

我这样做：

var random = Math.floor(Math.random() * $(".card").length);
    $(".card")
      .hide()
      .eq(random)
      .show();

但它只给出1个随机div。我需要4个随机div

以下是分区：

            <div className="card clubs" ref="card1">
              <img className="img" src={a} alt="a" />
            </div>
            <div className="card diamonds" ref="card2">
              <img className="img" src={b} alt="b" />
            </div>
            <div className="card hearts" ref="card3">
              <img className="img" src={c} alt="c" />
            </div>
            <div className="card spades" ref="card4">
              <img className="img" src={d} alt="d" />
            </div>

---

您的代码所做的是选择将显示的卡（“随机”）。如果你想显示所有的四张牌并且只是洗牌它们的位置，你必须随机重新定位它们

---

})

您可以使用以下内容：

    var parent = $("#cards"); // Parent container containing '.card' objects
    var cards = parent.children();
    while (cards.length) {
        parent.append(cards.splice(Math.floor(Math.random() * cards.length), 1)[0]);
    }

假设您的卡被包装在：

<div id='cards'>
            <div className="card clubs" ref="card1">
              <img className="img" src={a} alt="a" />
            </div>
            <div className="card diamonds" ref="card2">
              <img className="img" src={b} alt="b" />
            </div>
            <div className="card hearts" ref="card3">
              <img className="img" src={c} alt="c" />
            </div>
            <div className="card spades" ref="card4">
              <img className="img" src={d} alt="d" />
            </div>
</div>

可以处理jQuery元素，因此它使这变得有点简单

//grab shuffled array of jQuery card elements
var shuffledCards = randoSequence($(".card"));

//store their shuffled htmls
var shuffledCardHTMLs = [];
for(var i = 0; i < shuffledCards.length; i++){
    shuffledCardHTMLs[i] = shuffledCards[i].value[0].outerHTML;
}

//replace cards on page with those shuffled htmls
for(var i = 0; i < shuffledCardHTMLs.length; i++){
    $(".card").eq(i)[0].outerHTML = shuffledCardHTMLs[i];
}

//抓取jQuery卡元素的无序数组
var shuffledCards=randoSequence（$（“.card”）；
//存储他们的混合HTML
var shuffledCardHTMLs=[]；
对于（var i=0；i

此解决方案不关心卡片元素在页面上的位置；它可以处理任何事情。在开始替换页面上的卡片元素之前，我们存储htmls，因为我们不希望最终尝试访问已经覆盖的元素的html。如果要使用此代码，只需先将其放入HTML文档的head标记中：

<script src="https://randojs.com/1.0.0.js"></script>

Hi。它不起作用。我更新了我的代码（添加了div）。img也没用。你能在这里发布HTML代码吗？您的div/cards应该是同一父级的子级，您将在该父级上对DocumentReadyI am使用React执行上述

shuffleChildren

。我试过这样的代码：嗨。它不起作用。卡片排在底部。我更新了我的代码（添加了div）。img也不起作用。@zicxor我假设你的卡被包装在

中。请参阅编辑后的答案。几乎：）现在这些卡片粘在一起了。在我看来，这些卡片是混合的，但它们粘在一起。我不确定我是否理解。你说的粘在一起是什么意思？

<script src="https://randojs.com/1.0.0.js"></script>