jquery - 複数のセレクターを保持する変数

Question

スクリプトで何度も操作する必要があるセレクターがたくさんあります。

これまでのところ、私はこれを行ってきました：

var allSelectors3 = $('#icon20,#icon21,#icon22,#icon23,#icon24,#icon25,#icon26,#icon27,#icon28,#icon29,#icon30,#icon31,#icon32');
var allSelectors2 = $('#icon12,#icon13,#icon14,#icon15,#icon16,#icon17,#icon18,#icon19'); 
var allSelectors = $('#icon2,#icon3,#icon4,#icon5,#icon6,#icon7,#icon8,#icon9,#icon10,#icon11');

$(allSelectors).show();
$(allSelectors2, allSelectors3).hide();

これはこれを行うための最良の方法ですか？

Answer 1

いいえ、2 番目の は必要ありません$()。

var allSelectors = $('#icon20,#icon21,#icon22,#icon23,#icon24,#icon25,#icon26,#icon27,#icon28,#icon29,#icon30,#icon31,#icon32');
allSelectors.show()

2 つのリストを結合するには.add

allSelectors2.add(allSelectors3).hide();

Answer 2

jQuery のパフォーマンス ルールについて誰も言及していないので、ここにパフォーマンス ルールを示します。

変数でセレクターを宣言するのは良いことです (セレクターが多数ある場合)。それを正しく行っていることがわかります。

別のオプションは、 Selectors1 as にある各要素にクラスを追加することですclass="selector1"。そして、次を使用します。

$(".Selectors").show();
$(".Selectors2").hide();
$(".Selectors3").hide();

これは非常に見栄えがしますが、パフォーマンス ルールを読むと、クラスやその他の属性による選択が遅くなります。

また、2 番目の $() も必要ありません。これを直接使用してください：

var allSelectors3 = $('#icon20,#icon21,#icon22,#icon23,#icon24,#icon25,#icon26,#icon27,#icon28,#icon29,#icon30,#icon31,#icon32');
var allSelectors2 = $('#icon12,#icon13,#icon14,#icon15,#icon16,#icon17,#icon18,#icon19'); 
var allSelectors = $('#icon2,#icon3,#icon4,#icon5,#icon6,#icon7,#icon8,#icon9,#icon10,#icon11');

allSelectors.show();
allSelectors2.hide();
allSelectors3.hide();