Управление Селектором Javascript - PullRequest
Новая
       8

Управление Селектором Javascript

0 голосов
/ 28 сентября 2018

В следующих кодах 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?

Ответы [ 5 ]

0 голосов
/ 28 сентября 2018

Вы можете перетасовать длину вашего массива и 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>
0 голосов
/ 28 сентября 2018

Я думаю, что самое простое решение, чтобы не заботиться о порядке делений, это: 

$('.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>
0 голосов
/ 28 сентября 2018

как насчет этого 

$(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>
0 голосов
/ 28 сентября 2018

Вот решение, если вы не хотите изменять свой HTML (и также включать css):

  1. Сохранить позицию shuffle в массиве.

  2. Итерировать все div, имеющие класс chat.

  3. Поместить DOM element в new array в зависимости от положения в случайном порядке.

  4. Итерация всех 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>
0 голосов
/ 28 сентября 2018

Вы используете селектор запросов : 

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

. Выбирает первый элемент с обоими классами .chat и .word1.

...