將jQuery函數應用於第一個x結果選擇器？

Question

當我調用該函數的頁頁的SRC替換圖像數據src屬性上的每個圖像：

function showAllImg(param) {  
    $("img").each(function (index, element) { 
     $(this).attr("src", $(this).attr("data-src")); 
    }); 
} 

如何有選擇地應用這個功能呢？如果您點擊觸發器3，我想爲前三個圖像交換src。如果您點擊觸發器6，我想換掉前6個。稍後我可能會這樣做，所以單擊其他div會更改特定圖像的src。基本上我需要很多很多不同的方法來將這個功能應用到圖像上。

$('.trigger-3').click(function(){ 
    $(".selector img").slice(3).showImg(); 
}); 

$('.trigger-6').click(function(){ 
    $(".selector img").slice(6).showImg(); 
}); 

function showImg(param) { 
    $(this).attr("src", $(this).attr("data-src")); 
} 

<div class="trigger-3">Change first 3</div> 
<div class="trigger-6">Change first 6</div> 

<ul> 

      <li> 
       <img data-src="img/1.jpeg" src="whatever.jpeg" /> 
      </li> 
       <img data-src="img/2.jpeg" src="whatever.jpeg" /> 
      </li> 
       <img data-src="img/3.jpeg" src="whatever.jpeg" /> 
      </li> 
       <img data-src="img/4.jpeg" src="whatever.jpeg" /> 
      </li> 
       <img data-src="img/5.jpeg" src="whatever.jpeg" /> 
      </li> 
       <img data-src="img/6.jpeg" src="whatever.jpeg" /> 
      </li> 
       <img data-src="img/1.jpeg" src="whatever.jpeg" /> 
      </li> 
</ul> 

Answer 1

你正在找到你想要的東西。首先，.slice是要走的路，但第一個參數是指數開始，而第二個是指數結束（排除）。

所以，你應該切片看起來像：

$(".selector img").slice(0, 3); 

然後，你showImg是一個函數，而不是一個jQuery方法，所以你不能把它這樣。所以，你要麼$.fn.showImg創建jQuery的方法或使用.each()並通過您的功能像：

$(".selector img").slice(0, 3).each(showImg); 

Answer 2

使用index在jQuery.each()像在下面的例子：

function showAllImg(param) {  
    $("img").each(function (index, element) { 
     if (index < 3) { 
      $(this).attr("src", $(this).attr("data-src")); 
     } 
    }); 
} 

這將替換源爲第3個元素。

通過使用jQuery.slice()（請參閱Karl-AndréGagnon答案），您實際上在通過each循環之前減少了這些元素，這在性能方面會更好。

編輯：關於你的編輯，你可以做一個數據屬性（這樣你就不需要爲每個觸發元素的事件監聽器）更好：

HTML：

<div class="trigger" data-slice="3">Change first 3</div> 
<div class="trigger" data-slice="6">Change first 6</div> 

JS：

$('.trigger').click(function() { 
    $(".selector img").slice($(this).data('slice')).each(showImg); 
}); 

Answer 3

根據你的功能，你可以在foreach循環中使用索引：

function swapImages(howMany) {  
    $("img").each(function (index, element) { 
     if(index < howMany) { 
      $(this).attr("src", $(this).attr("data-src")); 
     } else { 
      return; 
     } 
    }); 
} 

$('#buttonToSwap').click(function(){ 
    swapImages(3); 
});