多個操作的JQuery語法

Question

我有一個列表，如果<span>元素，我需要過濾和應用多個操作（文本替換和有條件地添加一個類）。我有以下工作代碼：

$('span').filter(function() { 
    return $(this).text().toLowerCase()==phrase; 
}).text(translation); 

$('span').filter(function() { 
    return $(this).hasClass('translatable') && $(this).text().toLowerCase()==phrase; 
}).addClass(translated); 

這工作，而是通過所有的<span> s的顯然會兩次。是否有可能將它們組合成一個迭代的東西上的線路：

$('span').filter(function() { 
    return $(this).text().toLowerCase()==phrase; 
}).function() { 
    $(this).text(translation); 
    if($(this).hasClass('translatable')) 
     this.addClass("translated") 
} 

Answer 1

鑑於phrase測試是一樣爲您的過濾器我大概接近它是這樣的：

$('span').filter(function() { 
    return $(this).text().toLowerCase()==phrase; 
}) 
.text(translation) 
.filter('.translatable') 
.addClass('translated'); 

也就是說，先找到包含短語的跨度和設置他們的文字，然後過濾設置爲獲得具有translatable類的子集並將'translated'類添加到這些類。

Answer 2

你可以使用jQuery的每個方法

$('span').each(function() { 
    var $this = $(this); 
    if ($this.text().toLowerCase()==phrase){ 
     $this.text(translate); 
     if ($this.hasClass('translatable')) { 
      $this.addClass("translated"); 
     } 
    }  
}); 

做到這一點，或者你可以鏈方法

$('span').filter(function(){ return $(this).text().toLowerCase()==phrase; }) 
     .text(translate) 
     .filter(function(){ return $(this).hasClass('translatable'); }) 
     .addClass("translated"); 

我個人更喜歡第一種方法。雖然它不像第一個那麼漂亮，但它確實是一次迭代，而不像第二種方法那樣有四個單獨的迭代。有了正確的優化（感謝Samuel Caillerie），它應該稍微快一點。