javascript - how perform .add( .shift() ) on a jQuery object - Stack Overflow

admin管理员组

文章数量:1022719

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

Share Improve this question Follow asked Dec 28, 2009 at 9:51 TD540TD540 1,76933 gold badges1515 silver badges2727 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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.

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

Share Improve this question Follow asked Dec 28, 2009 at 9:51 TD540TD540 1,76933 gold badges1515 silver badges2727 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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.

本文标签： javascripthow perform add( shift() ) on a jQuery objectStack Overflow