jQuery ignore element in array by class

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

        }

Gareth · Accepted Answer · 2012-03-02 20:26:56Z

1

You could use:

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

Here's a jsFiddle to demonstrate.

answered Mar 2, 2012 at 20:26

Gareth

5,7283 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JKirchartz · Accepted Answer · 2012-03-02 20:27:56Z

1

You can use:

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

answered Mar 2, 2012 at 20:27

JKirchartz

18.1k8 gold badges64 silver badges89 bronze badges

Comments

Jasper · Accepted Answer · 2012-03-02 20:35:22Z

1

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

edited Mar 2, 2012 at 20:35

answered Mar 2, 2012 at 20:28

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

6 Comments

technopeasant Over a year ago

This is exactly what I was looking for but couldn't find, thank you. It works perfectly in your jsFiddle, but breaks the rest of my code (lots of arrays and indexing). Would you mind taking a look? jsfiddle.net/danielredwood/MgFj2/6

technopeasant Over a year ago

Jasper, thanks so much for your code and insight. Went with nnnnnn's because it was a little simpler and played nice when dropped in. But really, thank you for your time

Jasper Over a year ago

@technopeasant you had a copy/paste error just at the end of the .wrap() function call: jsfiddle.net/jasper/MgFj2/8. I added a comment next to the code I changed, you needed a );.

technopeasant Over a year ago

Im a dufus. Thanks so much for your help :)

Jasper Over a year ago

@technopeasant My code gets pretty small too:

boxImgs.wrap(function () {     if ($(this).hasClass('logo')) { return '' } else { return '<a href="' + urls[(index++)] + '" />' } });

... this code is about 20 more bytes than nnnnnn's

|

nnnnnn · Accepted Answer · 2012-03-02 20:44:52Z

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

answered Mar 2, 2012 at 20:44

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

3 Comments

technopeasant Over a year ago

In the end there will be more elements than urls (40 to 10). here's a jsFiddle I set up to test Jasper's idea: jsfiddle.net/danielredwood/MgFj2/6 I appreciate your help very much!

Jasper Over a year ago

Down vote because this seems to be the rest of the answers packed into one answer, but posted 20min later...

nnnnnn Over a year ago

@Jasper - It's not like I copied the other answers, they appeared as I started typing my own. Usually when I realise I've posted a duplicate right after somebody else I delete my answer, but in this case I saw I had quite a different take on it to your answer so I think it was more than reasonable for me to go ahead and post mine anyway - other than the fact that we both used an array of urls we did it by completely different methods.

Collectives™ on Stack Overflow

jQuery ignore element in array by class

4 Answers 4

Comments

Comments

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related