Given: a container with three elements. Task: take the first element and move it to the end of the container (it will be 2, 3, 1 sequence), then do the same for the first element (3, 1, 2 will result).

enter image description here

In the solution below, the first time everything works successfully:

$container.append($allElements.first());

If you duplicate this line and execute the code, then moving to the sequence (3, 1, 2) will not occur. Perhaps I misunderstood the previously studied, but it seems like the jQuery object changes its state when some changes occur with the corresponding DOM elements.

Trying to fetch again instead of the existing $container object:

 $('.container').append($allElements.first());

Nothing happens either. Explain, please, the reasons for this.

PS It is possible to solve the problem posed through convoluted conditions and arithmetic operations, but striving for simplicity of the code, I would like to work only in the first element of $allElements.first() (in each iteration).

 let $container = $('.container'); let $allElements = $('.element'); $container.append($allElements.first()); //$container.append($allElements.first()); // не работает //$('.container').append($allElements.first()); // так тоже 
 .container { display: inline-block; background: rgba(255, 0, 0, 0.25); line-height: 1; } .element { display: inline-block; width: 100px; height: 100px; } .element-first { background: rgba(255, 255, 0, 0.25); } .element-second { background: rgba(0, 128, 0, 0.25); } .element-third { background: rgba(0, 0, 255, 0.25); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="element element-first">1</div> <div class="element element-second">2</div> <div class="element element-third">3</div> </div>

  • is this not an option? jqueryui.com/draggable/#cursor-style - user33274
  • one
    jQueryUI-draggable Lensky, jQueryUI-draggable makes it possible to drag items with the mouse cursor. Maybe it would be useful to me if I did not make a slider. So in my case, we need full automation. - Bokov Gleb

3 answers 3

A collection in jQuery is NOT a live collection, therefore, until you modify it with your hands, nothing will change in it.

Therefore, in your code you constantly add the same element.

As a solution to the forehead, you can simply re-receive all the elements, although in fact, you only need the first one.

For example:

 let $container = $('.container'); $container.append($('.element:first-child')); $container.append($('.element:first-child')); 
 .container { display: inline-block; background: rgba(255, 0, 0, 0.25); line-height: 1; } .element { display: inline-block; width: 100px; height: 100px; } .element-first { background: rgba(255, 255, 0, 0.25); } .element-second { background: rgba(0, 128, 0, 0.25); } .element-third { background: rgba(0, 0, 255, 0.25); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="element element-first">1</div> <div class="element element-second">2</div> <div class="element element-third">3</div> </div>

  • Thank you for your reply! - Bokov Gleb

This entry

 let $allElements = $('.element');

once took the sequence and always when calling

 $allElements.first()

returns the same link, try this

 let $container = $('.container'); $container.append($('.element').first()); $container.append($('.element').first());
  • what has been said below. why write the same thing? - Tsyklop
  • jsfiddle.net/2yo9rkze - Maistrenko Vitalii
  • @Tsyklop wrote the answer for now, said Maistrenko Vitalii
  • one
    Thank you for the answer! - Bokov Gleb

It is necessary to make a sample again. For when you made a sample for the first time, everything was recorded for you as for the first time - tobish changes in the $ allElements variable did not occur.

 let $container = $('.container'); let $allElements = $('.element'); $container.append($allElements.first()); $container.append($('.element').first()); // уже работает //$('.container').append($allElements.first()); // так тоже 
 .container { display: inline-block; background: rgba(255, 0, 0, 0.25); line-height: 1; } .element { display: inline-block; width: 100px; height: 100px; } .element-first { background: rgba(255, 255, 0, 0.25); } .element-second { background: rgba(0, 128, 0, 0.25); } .element-third { background: rgba(0, 0, 255, 0.25); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="element element-first">1</div> <div class="element element-second">2</div> <div class="element element-third">3</div> </div>

  • add an explanation in response to why it should work - Grundy
  • @Grundy $container.append($('.element').first()); It is necessary to make a sample again. For when you made a sample for the first time, everything was recorded for you as for the first time - tobish changes in the $allElements variable did not occur. - Tsyklop
  • Thank you for your reply! - Bokov Gleb