I'm trying to manipulate a jQuery object to make the first item the last, second the first, third the second, and so on.

With an Array this would be simple:

myArray = [ "a", "b", "c", "d", "e" ];
myArray.add( myArray.shift() );
// done.

How can I do this with a jQuery object?

myObject = $('.myDiv').children();
myObject.nowWhat(?)

Thanks for any help.

I'm trying to manipulate a jQuery object to make the first item the last, second the first, third the second, and so on.

With an Array this would be simple:

myArray = [ "a", "b", "c", "d", "e" ];
myArray.add( myArray.shift() );
// done.

How can I do this with a jQuery object?

myObject = $('.myDiv').children();
myObject.nowWhat(?)

Thanks for any help.

• javascript
• jquery

5 Answers 5

The following should do it: UPDATES:

arr = $('.myDiv').children().get();
myObject = $(arr);  //wrapped it again to a jquery object
myObject.add( arr.shift() );
myObject.someJQueryEventFunc();

get() returns an array of all the matched elements.

get(index) returns a single element of the matched elements

$('.myDiv').find(':first').remove().appendTo('.myDiv');

However, it would be better to identify the div with an ID and not a class as this won't do quite what you expect if you have more than one element with class myDiv. In that case you'll have to do this:

$('.myDiv').each(function (index, div) {
    $(div).find(':first').remove().appendTo(div);
});

You can wrap this in a function to perform the functionality described in your ment:

transformFirstThree('.myDiv');
rotate('.myDiv');
transformFirstThree('.myDiv')


function transformFirstThree (selector) {
    $(selector).find(':lt(3)').each(function (index, item) {
        // do whatever
    });
}

function rotate (selector) {
    $(selector).each(function (index, div) {
        $(div).find(':first').remove().appendTo(div);
    });
}

var x = $('.mydiv').children();
console.log (x[0]);
console.log (x[1]);
var arr= x.slice (1);
arr.push(x[0]);
console.log (arr[0]);

See: http://api.jquery./jQuery.makeArray/ -- it converts array-like structures to true JS arrays.

I've just had to implement something like this. Basically what I've done is:

$parent
    .find(elementSelector + ':lt(' + numberOfElementsToShift + ')')
    .insertAfter($parent.find(elementSelector + ':last'));

In your case, numberOfElementsToShift would be 1. $parent could be an unordered list, elementSelector could be the string li, for example.

What it does is select the first numberOfElementsToShift of elements and move them to the end of all the elements.

Seems more efficient to move the element(s) straight to the end once than to shift them n - numberOfElementsToShift times.