CODEWITHSUNDEEP
javascripthtmlcssselector
Renz C. Gohing
Renz C. Gohing

Reputation: 123

Controlling Javascript Selector

The following codes makes div appear sequentially.

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

What I want to do is, I don't want it to appear in a sequence. I can do it by simply replacing elements in an html, for example I can do:

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

However, I don't want to change anything on the html elements. I want to do it using javascript. At first, I thought javascript selector works like an array and I can replace

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

but it does not seems to work that way.

Is there a way to do this with Javascript?

Upvotes: 4

Views: 244

Answers (5)

Just code
Just code

Reputation: 13801

You can shuffle your array length and prependTo to word4 something like this:

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

Upvotes: 0

NullPointer
NullPointer

Reputation: 7368

Here be a solution if you do not want to change your HTML(and incase css also):

  1. Keep the shuffle Position in array.

  2. Iterate all div having class chat.

  3. Put the DOM element in new array based on shuffle Position.

  4. Iterate all element of new array and append in 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>

Upvotes: 1

Tony
Tony

Reputation: 425

I think the simplest solution, to not care about the order of the Divs, is:

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

You should define a common class for these randomly ordered elements, or wrap them with a parent element, eg:

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

Upvotes: 0

DevMS
DevMS

Reputation: 72

how about this

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

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44087

You use a query selector:

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

This selects the first element with both classes .chat and .word1.

Upvotes: 0

Related Questions