2012-05-13 18 views
-1

jQueryを使用してクラスを追加しようとします。複数の変数を最適化する

var tit = ('.tit a'); 
txt_animal = ['pig','horse','rabbit','cat','monkey']; 
txt_fruit = ['melon','apple','kiwi','orange']; 
txt_hobby = ['movie','ski','swim','dance','internet','baseball']; 

$(txt_animal).each(function(i,v){ 
    $(tit + ':contains("'+ v +'")').addClass('tag tag_animal'); 
} 
$(txt_fruit).each(function(i,v){ 
    $(tit + ':contains("'+ v +'")').addClass('tag tag_fruit'); 
} 
$(txt_hobby).each(function(i,v){ 
    $(tit + ':contains("'+ v +'")').addClass('tag tag_hobby'); 
} 

正常に動作します。しかし、私はこれよりも良い方法だと思います。
最高のパフォーマンスを得るためにJavaScriptを最適化するにはどうすればよいですか?

+0

を参照してください。これに実際にパフォーマンスの問題がありますか? –

+0

はtxt_animalで、兄弟はグローバルであると考えられていますか? –

+0

行1にドル記号がありませんか? –

答えて

1

以下のコードは、両方の繰り返し(そして高価な)を避けるべきであるDOMは、タグの各クラスの正規表現を使用して、可能なマッチを介し繰り返し反復を問い合わせます。

var txt = { 
    animal: /(pig|horse|rabbit|cat|monkey)/i, 
    fruit: /(melon|apple|kiwi|orange)/i, 
    hobby: /(movie|ski|swim|dance|internet|baseball)/i 
}; 

$('.tit a').each(function() { 
    var $this = $(this);  // saves three calls to `$(this)` 
    var t = $this.text();  // get the text contents of the link 

    for (var tag in txt) {  // for each key word 
     if (txt[tag].test(t)) { // test the text against the regexp 
      $this.addClass('tag').addClass('tag_' + tag); 
     } 
    } 
}); 

は、それが必要でない限り、パフォーマンスを最適化していないhttp://jsfiddle.net/alnitak/DFcFH/1/

1

代わりにDRYを最適化します。

var tit = ('.tit a'); 
var txt = { 
    "animal": ['pig','horse','rabbit','cat','monkey'], 
    "fruit": ['melon','apple','kiwi','orange'], 
    "hobby": ['movie','ski','swim','dance','internet','baseball'] 
}; 

for (var cat in txt) { 
    $(txt[cat]).each(function(i,v){ 
    $(tit + ':contains("'+ v +'")').addClass('tag tag_' + cat); 
    }); 
} 
+1

あなたは私を先に渡しました。私の[フィドル](http://jsfiddle.net/shehovn/9kKKY/)。 –

+0

実際にこのコードをテストしましたか?それは不必要な繰り返し自体を含んでいるだけでなく、壊れています。 – Alnitak

関連する問題