Add items from front of array to end of array

Question

This seems very simple. Not quiet sure how I am making sure a mess of it.

I have an list. I want to take the first three items front the front and add them to the rear. I dont want to remove the items from the front. I want them to be on the front and on the rear.

So my list starts like this

[1,2,3,4,5,6,7,8,9,10]

and after I am done with it will look like this

[1,2,3,4,5,6,7,8,9,10,1,2,3]

This list is stored in a <ul>

Here is my code

_options.slides = $.makeArray($('.slide'));
var el = [];
$.each(_options.slides.splice(0, 3), function (x, item) {
     el.push(item);
});
$('#video-triggers').clone().append(el);  //break point here

Someone of the code is probably unnecessary as I have been playing around for this for too long. If I put a break point on the clone append line and execute the code in the console (development tools) here are the results

EDIT

The clone and append line has my results, but the container doesnt have those results?

Here are the results without the clone

EDIT 2

I also tried this

$('#video-triggers').append(_options.slides.concat(el))

Answer 1

You have your order of operations and variables mixed up . . . you are cloning your target <ul>, instead of the <li>'s that you want to copy. Try this . . .

Change this:

$('#video-triggers').clone().append(el);

. . . to this:

el.clone().appendTo($('#video-triggers'));

Answer 2

Well that is because you cloned it and then you added the new elements to the clone (and the clone does not exist on your page).

Answer 3

a = [1,2,3,4,5,6,7,8,9,10];
b = a.concat(a.slice(0,3));
console.log(b);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3]

Answer 4

Use unshift(); to push items to front of array.

$.each(_options.slides.splice(0, 3), function (x, item) {
     el.push(item);
     el.unshift(item);
});