JQuery игнорировать элемент в массиве по классу

Question

Массив возвращает серию .box, один из которых имеет дополнительный класс .logo Как применить функцию к целым числам в массиве, игнорируя этот один элемент, не удаляя его? (не могу использовать .splice, потому что мне нужно .logo, чтобы остаться в массиве для других целей)

Так что мне нужно сказать: ЕСЛИ .logo находится в пределах индекса 0-2 массива, ТОГДА проигнорируйте его и добавьте следующее целое число

Вот что я сейчас использую. Это многословно и безобразно:

    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

Вы можете использовать:

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

Answer 2

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

Вот демоверсия: http://jsfiddle.net/jasper/h6pN8/1/

Этот код включает каждый элемент <img> в элемент <a>, если он не имеет класса .logo. Атрибуты href получены из массива, поэтому первый индекс массива будет применен к первому элементу, отличному от .logo, второй индекс будет применен ко второму элементу, отличному от .logo и т. Д.

Answer 3

Вы можете использовать:

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

Вот jsFiddle для демонстрации.

Answer 4

У вас нет массива, у вас есть объект jQuery (который «похож на массив»).

Если вам нужно сохранить объект b:

var b = $('.box')

... для других целей вы можете просто создать еще один объект, который удаляет элемент (ы) .logo:

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

Хотя вам это не нужно, если вы просто хотите обработатьЭлементы img в элементах блока без логотипа:

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

Но все равно получается немного неуклюже назначать отдельные якоря оставшимся элементам:

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]) );
});

Очевидно (как иисходный код) это предполагает, что количество элементов без класса "logo" будет точно соответствовать количеству URL-адресов видео (или, по крайней мере, будет меньше количества URL-адресов видео).