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>次。是否可以将它们组合成一个迭代，具体如下：

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

Answer 1

你可以用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），它应该稍快一些。

Answer 2

鉴于phrase测试对于您的两个过滤器都是相同的，我可能会这样做：

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

也就是说，首先找到包含该短语的跨度并设置其文本，然后过滤该集合以获取具有translatable类的子集，并将'translated'类添加到那些。

用于多个操作的JQuery语法

2 个答案: