Rotate elements using same object

Question

In below example I want to rotate elements using insertBefore, I mean every time I click the last object should be moved to first using insertBefore.

Here is simple example,

$elems = $('.parent').find('div');

$('body').click(function() {
  $elems = $elems;
  $elems.eq(4).insertBefore($elems.eq(0))
  console.log('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

As you can see after clicking first time, every single time same elements gets referenced and inserted before. Is it possible to use reference dom with same object? As this is really simplified example of complex problem, and it would help a lot if I can use variable instead of using jQuery selector every time.

Could you please edit your question to make it clearer what you're trying to do, and what the issue is. It's really not clear at the moment. — Rory McCrossan, Sep 15 '17 at 10:06
You want to put `$elems = $('.parent').find('div')` into your click handler, so that you always get the _current_ state of the DOM. Otherwise you will just be working on a “cached” selection, that does not reflect the actual DOM order of the elements. — CBroe, Sep 15 '17 at 10:09
Think he wants to avoid additional selections. Instead he has to have a reference of current order of elements inside the script and update on each `insertBefore()`. — skobaljic, Sep 15 '17 at 10:11
Move `$elems = $('.parent').find('div');` inside your click function — Carsten Løvbo Andersen, Sep 15 '17 at 10:13
Sorry, I updated my question. Yes I want to avoid selection every single time as I want to reference same dom elements multiple times. So it would have been great if I could use variable instead. I tried to google it but I am missing right keywords to get results. — Zorro Here, Sep 15 '17 at 10:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I don't know why you need the object to be outside of the click function.

So here is a solution:

$('body').click(function() {
  $('.parent div:last').prependTo( $('.parent') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Alternative with object outside the function

To make that work, I've made an object of .parent not .parent div:

var par = $('.parent');
$('body').click(function() {
  par.find('div:last').prependTo( par );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

skobaljic · Answer 2 · 2017-09-15T10:43:31.613

If you want to avoid additional selections inside the DOM, than you should update your jQuery selection (array) inside the script this way (or similar):

$elems = $('.parent div');
function insertElement(selection, indexFrom, indexTo) {
    selection.eq(indexFrom).insertBefore(selection.eq(indexTo));
    selection.splice(indexTo, 0, selection.splice(indexFrom, 1)[0]);
};
$('body').click(function() {
    insertElement($elems, $elems.length-1, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

Also on JSFiddle.

For moving elements inside JS array more info at Move an array element from one array position to another.

Rotate elements using same object

2 Answers2

Alternative with object outside the function