Controlling Javascript Selector

Question

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?

not sure what you want to achieve, but looks like you want the html show not in the order it was written. you could use css flex order (developer.mozilla.org/en-US/docs/Web/CSS/order) or jquery sortable (jqueryui.com/sortable) — am05mhz
– am05mhz, Commented Sep 28, 2018 at 4:06
That's right, not in order. I'll give it a try tomorrow, thanks! — Renz C. Gohing
– Renz C. Gohing, Commented Sep 28, 2018 at 4:25

NullPointer · Accepted Answer · 2018-09-29 15:35:40Z

1

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

Keep the shuffle Position in array.
Iterate all div having class chat.
Put the DOM element in new array based on shuffle Position.
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>

edited Sep 29, 2018 at 15:35

answered Sep 28, 2018 at 5:30

NullPointer

7,3885 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kaiido Over a year ago

Avoid $.remove in this case. It's a complicated method that goes deep inside the element to remove all data and events attached to it, instead in such a case, you might prefer $.detach. But in this exact case, $.prepend is just enough, ParentNode.appendChild method takes care of removing the node if in DOM.

Renz C. Gohing Over a year ago

Hi NullPointer, this is what I need, but how do you apply fadetoggle on it?

Renz C. Gohing Over a year ago

Oh, it's all good now, I was able to figure it out. Thank you! :)

Jack Bashford · Accepted Answer · 2018-09-28 03:57:01Z

0

You use a query selector:

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

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

answered Sep 28, 2018 at 3:57

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

2 Comments

Jack Bashford Over a year ago

No problem whatsoever!

Kaiido Over a year ago

What is this second param?

DevMS · Accepted Answer · 2018-09-28 04:03:01Z

0

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>

answered Sep 28, 2018 at 4:03

DevMS

725 bronze badges

3 Comments

DevMS Over a year ago

I dont understand what exactly you want. but if you want show word1,word2,word3 at once my answer will works

Renz C. Gohing Over a year ago

Hi, i want to be able to show those divs not order. Currently it shows in order. I can do it by changing divs but i want to do it using javascript.

DevMS Over a year ago

OK. you want div shows one by one and it works well. your problem is that you want mix div orders EX) word1 word3 word2 OR word2 word1 word3 is it right?

Tony · Accepted Answer · 2018-09-28 05:58:12Z

0

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>

answered Sep 28, 2018 at 5:58

Tony

4351 gold badge5 silver badges12 bronze badges

1 Comment

NullPointer Over a year ago

@Tony-OP already mentioned that he don't want to change the HTML.so in this case you solution will work?

Just code · Accepted Answer · 2018-10-01 04:26:59Z

0

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>

edited Oct 1, 2018 at 4:26

answered Sep 28, 2018 at 6:07

Just code

13.8k10 gold badges54 silver badges94 bronze badges

4 Comments

NullPointer Over a year ago

-OP already mentioned that he don't want to change the HTML.so in this case you solution will work?

Just code Over a year ago

OP said he don't wants to change in the HTML of 1,2,3 4 is not stated anywhere.

NullPointer Over a year ago

>>However, I don't want to change anything on the html elements. I want to do it using javascript.

Just code Over a year ago

@NullPointer will you append all the options at the end of the body? does that makes sense?

Collectives™ on Stack Overflow

Controlling Javascript Selector

5 Answers 5

3 Comments

2 Comments

3 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

3 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related