CODEWITHSUNDEEP
jqueryarraysclassif-statement
technopeasant
technopeasant

Reputation: 7959

jQuery ignore element in array by class

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" />');

        }

Upvotes: 1

Views: 565

Answers (4)

nnnnnn
nnnnnn

Reputation: 150080

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).

Upvotes: -1

Jasper
Jasper

Reputation: 76003

//select .box element(s)
var b       = $('.box'),      //Box

    //then use that selection to find the descendant images
    boxImgs = b.find('img'),  // Box element images

    //setup URLs to add to elements
    urls    = [
        'http://player.vimeo.com/video/34969501',
        'http://player.vimeo.com/video/35036115',
        'http://player.vimeo.com/video/35033574'
    ],

    //setup an index to keep track of where in the urls variable we are
    index = -1;

//if you pass a function to `.wrap` you can return what you want to wrap the element with for each element individually
boxImgs.wrap(function () {

    //check if this element has the `.logo` class, if so return nothing so it gets wrapped with nothing
    if ($(this).hasClass('logo')) {
        return '';

    //otherwise wrap this element with a link that has a href attribute from the urls array
    } else {

        //increment the index
        index++;

        //if the index has surpassed the number of urls, loop back to the beginning of the array
        if (index >= urls.length) {
            index = 0;
        }
        return '<a href="' + urls[index] + '" />';
    }
});

Here is a demo: http://jsfiddle.net/jasper/h6pN8/1/

This code wraps each <img> element in a <a> element as long as it doesn't have the .logo class. The href attributes come from an array so the first index of the array will be applied to the first non-.logo element, the second index will be applied to the second non-.logo element, etc.

Upvotes: 1

JKirchartz
JKirchartz

Reputation: 18042

You can use:

$('.box').not('.logo').find...

Upvotes: 1

Gareth
Gareth

Reputation: 5719

You could use:

var boxImgs = $('.box:not(.logo)').find('img').wrap(...);

Here's a jsFiddle to demonstrate.

Upvotes: 1

Related Questions