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元件等