Question

An array returns a series of .box‘s, one of which has an additional class of .logo How do I apply a function to integers in the array ignoring that one element without removing it? (can’t use .splice because I need .logo to stay in the array for other purposes)

So I need to say: IF .logo is within index 0-2 of the array THEN ignore it and add the next integer

Here’s what I’m currently using. It’s verbose and ugly:

    var b       = $('.box'),      //Box
        boxImgs = $('.box img');  // Box element images

        if (b.eq(0).hasClass('logo')) {

            boxImgs.eq(1).wrap('<a href="http://player.vimeo.com/video/34969501" />');
            boxImgs.eq(2).wrap('<a href="http://player.vimeo.com/video/35036115" />');
            boxImgs.eq(3).wrap('<a href="http://player.vimeo.com/video/35033574" />');

        } else if (b.eq(1).hasClass('logo')) {

            boxImgs.eq(0).wrap('<a href="http://player.vimeo.com/video/34969501" />');
            boxImgs.eq(2).wrap('<a href="http://player.vimeo.com/video/35036115" />');
            boxImgs.eq(3).wrap('<a href="http://player.vimeo.com/video/35033574" />');

        } else if (b.eq(2).hasClass('logo')) {

            boxImgs.eq(0).wrap('<a href="http://player.vimeo.com/video/34969501" />');
            boxImgs.eq(1).wrap('<a href="http://player.vimeo.com/video/35036115" />');
            boxImgs.eq(3).wrap('<a href="http://player.vimeo.com/video/35033574" />');

        } else {

            boxImgs.eq(0).wrap('<a href="http://player.vimeo.com/video/34969501" />');
            boxImgs.eq(1).wrap('<a href="http://player.vimeo.com/video/35036115" />');
            boxImgs.eq(2).wrap('<a href="http://player.vimeo.com/video/35033574" />');

        }

Answer 1

You don’t have an array, you have a jQuery object (which is “array like”).

If you need to keep your b object:

var b = $('.box')

…for other purposes then you can simply create another object that removes the “.logo” element(s):

var bNoLogo = b.not(".logo");

Though you don’t really need it if you just want to process the img elements in the non-logo box elements:

var imgs = b.not(".logo").find("img");

But it still ends up a bit clunky to assign individual anchors to the remaining elements:

var urls = [
    'http://player.vimeo.com/video/34969501',
    'http://player.vimeo.com/video/35036115',
    'http://player.vimeo.com/video/35033574'
];

b.not(".logo").find("img").each(function(i) {
    $(this).wrap( $("<a>").attr("href", urls[i]) );
});

Obviously (just as in your original code) this assumes that the number of elements without the “logo” class will exactly match the number of video urls (or at least be less than the number of video urls).