Question

以下代码使div顺序出现。

$(document).ready(function() {
    $('.word1, .word2, .word3').each(function(fadeIn) {
      $(this).delay(fadeIn * 500).fadeIn(1000);
    });
  });

  .chat {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="chat word1">Word 1</div>
  <div class="chat word2">Word 2</div>
  <div class="chat word3">Word 3</div>
  
  
  <div id="" class="">Word 4</div>
</body>

我想做的是，我不想让它按顺序出现。我可以通过简单地替换html中的元素来做到这一点，例如，我可以做到：

  <div class="chat word2">Word 2</div>
  <div class="chat word1">Word 1</div>
  <div class="chat word3">Word 3</div>

但是，我不想更改html元素上的任何内容。我想用javascript做。起初，我认为javascript选择器的作用就像一个数组，我可以替换

$('.word1, .word2, .word3') with $('.word2, .word1, .word3')

但它似乎不能那样工作。

是否可以使用Javascript来做到这一点？

Answer 1

如果您不想更改HTML（并且还包括css），请使用以下解决方案：

将随机播放位置保留在数组中。
迭代所有具有类chat的div。
根据随机播放位置将DOM element放入new array中。
迭代element中new array和append中的所有body。

$(document).ready(function() {
 var shufflePosition=[1,0,2];//Keep the shufflePosition in array
 var result=[];

 //Iterate all div having class chat
 $('.chat').get().forEach(function(entry, index, array) {
     result[index]=array[shufflePosition[index]];
 });

 for (var i = result.length-1; i >= 0; i--) {
    $( "body" ).last().prepend(result[i]);
    //$(result[i]).show();
    $(result[i]).delay(i*500).fadeIn(1000);
 }
});

.chat {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="chat word1">Word 1</div>
  <div class="chat word2">Word 2</div>
  <div class="chat word3">Word 3</div>
  <div id="" class="">Word 4</div>
</body>

Answer 2

您使用查询选择器：

var word1 = document.querySelectorAll(".chat", ".word1")[0];

这将同时选择类.chat和.word1的第一个元素。

Answer 3

怎么样

$(document).ready(function() {
    $('.chat').delay(500).fadeIn(1000);
  });

  .chat {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="chat word1">Word 1</div>
  <div class="chat word2">Word 2</div>
  <div class="chat word3">Word 3</div>
  
  
  <div id="" class="">Word 4</div>
</body>

Answer 4

我认为不关心Divs顺序的最简单解决方案是：

$('.chat').each(function(fadeIn) {
    $(this).delay(fadeIn * 500).fadeIn(1000);
});

您应该为这些随机排序的元素定义一个通用类，或将它们与父元素包装在一起，例如：

$('.randomlysortedelements div').each(function(fadeIn) {
    $(this).delay(fadeIn * 500).fadeIn(1000);
});

<body>
  <div class="randomlysortedelements">
    <div class="chat word3">Word 3</div>
    <div class="chat word1">Word 1</div>
    <div class="chat word2">Word 2</div>
  </div>
  <div id="" class="">Word 4</div>
</body>

Answer 5

您可以将数组长度和prependTo改写为word4，如下所示：

$(document).ready(function() {

 elements =  $('.word1, .word2, .word3');
 let arrayData = [];
 for(i=0;i<elements.length;i++){
 arrayData.push(i);
 }
 
 shuffleArray(arrayData);
 for(i=0;i<arrayData.length;i++){ 
   $("body:last").prepend(elements.eq(arrayData[i]));
   elements.eq(arrayData[i]).show()
 }
    
    
    function shuffleArray(array) {
      for (var i = array.length - 1; i > 0; i--) {
          var j = Math.floor(Math.random() * (i + 1));
          var temp = array[i];
          array[i] = array[j];
          array[j] = temp;
      }
    }
  });

.chat {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="chat word1">Word 1</div>
  <div class="chat word2">Word 2</div>
  <div class="chat word3">Word 3</div>
  
  
  <div id="" class="word4">Word 4</div>
</body>

控制Javascript选择器

5 个答案: