0

Estou fazendo um script para um quiz, e gostaria de "embaralhar" as Divs com a classe "question" dentro das Divs com a classe "q". para que as questoês fossem aleatórias. Não achei nenhuma forma de fazer isso, por isso peço ajuda prfv.

HTML

<section>
    <article class="q" id="questao1">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao2">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao3">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao4">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao5">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao6">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao7">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao8">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao9">
        <div class="question">

        </div>
    </article>
    <article class="q" id="questao10">
        <div class="question">

        </div>
    </article>
    <article class="q" id="resultado">

    </article>
</section>

1 Resposta 1

0

Encontrei esse exemplo aqui http://jsfiddle.net/BwJHj/1/ apliquei no seu código, veja abaixo se isso te atende.

var cards = $(".q");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <article class="q" id="questao1">
        <div class="question">
        questao1
        </div>
    </article>
    <article class="q" id="questao2">
        <div class="question">
        questao2
        </div>
    </article>
    <article class="q" id="questao3">
        <div class="question">
        questao3
        </div>
    </article>
    <article class="q" id="questao4">
        <div class="question">
        questao4
        </div>
    </article>
    <article class="q" id="questao5">
        <div class="question">
        questao5
        </div>
    </article>
    <article class="q" id="questao6">
        <div class="question">
        questao6
        </div>
    </article>
    <article class="q" id="questao6">
        <div class="question">
        questao6
        </div>
    </article>
    <article class="q" id="questao8">
        <div class="question">
        questao8
        </div>
    </article>
    <article class="q" id="questao9">
        <div class="question">
        questao9
        </div>
    </article>
    <article class="q" id="questao10">
        <div class="question">
        questao10
        </div>
    </article>
    <article class="q" id="resultado">

    </article>
</section>

Origem: https://stackoverflow.com/questions/18483241/random-div-order-on-page-load

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .