jQuery按类别忽略数组中的元素

Question

数组返回一系列.box的数组，其中一个数组有一个额外的类.logo如何将数组中的整数应用于整数忽略该元素而不删除它？ （不能使用.splice，因为我需要.logo留在阵列用于其他目的的）

所以我需要说：IF .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

不必一个数组，你有一个jQuery对象（这是“数组像”）。

如果你需要保持你的b对象：

var b = $('.box') 

...作其他用途，那么你可以简单地创建另一个对象，删除了 “.logo” 元素（S）：

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

明显（就像在你原来的代码）这个假定的元素没有“标志”类数量将正好匹配视频网址的数量（或者至少小于视频网址的数量）。

Answer 2

你可以使用：

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

这里有一个jsFiddle证明。

Answer 3

您可以使用：

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

Answer 4

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

此代码封装在一个<a>元素中的每个元素<img>，只要它不具备.logo类。来自阵列，使得所述阵列的所述第一索引将被施加到第一非.logo元件的href属性，所述第二索引将被应用到所述第二非.logo元件等