控制 Javascript 选择器

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

您使用 查询选择器:

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

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

Answer 2

这个怎么样

$(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 3

如果您不想更改 HTML（并且 css 也不想更改），这里有一个解决方案：

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

$(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 4

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

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

你应该为这些随机排列的元素定义一个共同的class，或者用父元素包裹它们，例如：

$('.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 选择器

Controlling Javascript Selector

html

javascript

css

selector