4

jQuery を使用して、IE7 および 8 でサポートされていないセレクターを処理しています (ほとんどの場合、:nth-childおよび:last-child)。addClassjQueryのメソッドを使用するよりもパフォーマンスが高いと読んだcssので、それを行うためにJSをリファクタリングしています。

同じクラスを複数の (時には多くの!) 異なるセレクターに追加する最良の方法は何ですか? それらをすべて同じステートメントに投げ込み、リストの最後で addClass を使用しても安全ですか?

例えば：

$('.selector1:nth-child(3),
   .diff-selector2:last-child,
   #another-selector:nth-child(2),
   tr.highlighted td:last-child,
   h2.job-title:last-child').addClass('fallback-class');

そのセレクターのリストが遅くなる限界またはポイントはありますか? これらのセレクター リストの変数を作成する必要がありますか? より良いアプローチはありますか？

最後の注意: 残念ながら Selectivizr を使用すると、IE7 が停止してしまいました。そのため、上記の方法を使用することにしました。

4

1 に答える 1

2

2つの方法が頭に浮かぶ

1）要素に共通のクラスを設定し、それらにクラスを追加できます

<p class="addThis">1</p>
<p>2</p>
<span class="addThis">3</span>
<a>4</a>
<p>5</p>
<a class="addThis">6</a>

$('.addThis').addClass('fallback-class'); //1,3,6 will be added classes

2）親/子メソッドを使用できます

<p>
    <a>1</a>
    <span>2</span><!-- wont be added class -->
</p>
<p>
    <a>3</a>
</p>
<a>3</a><!-- wont be added class -->
<p>4</p><!-- wont be added class -->

$('p').children('a').addClass('fallback-class');
//this will adds class which got "a" selector inside "p"

$('a').parent('p').addClass('fallback-class');
//this will adds class "p" selector which got children "a"
于 2012-06-20T11:12:16.773 に答える