Question

I would like to perform a splice method much like the native Array.splice but I would like to splice a jQuery collection of DOM elements. How is this done cleanly?

Edit: why do I need example code? I am looking for the exact same functionality of the ECMAScript Array.splice function, except I want it to work on a jQuery array of DOM elements, and update the DOM when it’s done.

Answer 1

Selecting elements with jQuery actually gives you an array of elements, which can be treated as a normal javascript array as well as a jQuery object. To ensure that an array is a jQuery object you can wrap it in a call to jQuery(). For example:

var x = jQuery('p'),
    y = jQuery(x.splice(x.length / 2, x.length));

x.css('background-color', 'red');
y.css('background-color', 'blue');

x contains the first half of <p> tags, which all now have a red background, and y has the second half, with a blue background.

Here’s some proof.

Also, there is no problem with mixing tags (e.g. <p> and <div> tags can be in the array and jQuery will work as expected). See here.