質問させてください。
以下のようなHTML構造で連続している場合、
ID内全体のチェックボックスの状態を取得し、未チェックの物を非表示するにはどのようにすれば一番処理速度が速いのでしょうか?
<div id="hoge1">
<ul>
<li>
<ul class="Parents">
<li class="child"><input type="checkbox" name="AAA"></li>
<li class="child"><input type="checkbox" name="BBB"></li>
<li class="child"><input type="checkbox" name="CCC"></li>
<li class="child"><input type="checkbox" name="DDD"></li>
</ul>
</li>
<li>
<ul class="Parents">
<li class="child"><input type="checkbox" name="AAA"></li>
<li class="child"><input type="checkbox" name="BBB"></li>
<li class="child"><input type="checkbox" name="CCC"></li>
<li class="child"><input type="checkbox" name="DDD"></li>
</ul>
</li>
~~~~~~~~~~~~
※繰り返し
~~~~~~~~~~~~
</ul>
</div>
現在はjQueryで$ (ul.Parents li.child)で全体をラップし、for文のループ内で$eq()で1件毎chekedを参照し、.hide()を行っています。
動作自体は問題ないのですが、処理速度の遅さが気になっています。
速い方法でればjQueryを使用しない方法でもかまいません。
どうかよろしくお願い致します。
No.5ベストアンサー
- 回答日時:
No.4 の方のキャッシュを利用するのは良い考えと思います。
ただ、querySelectorAll() にしろ jQuery にしろ、その戻り値は「生きていません」。つまり、文書状態に応じてアップデートするのは自分の責任、ということになります。
キャッシュを使うなら「生きた」リストを使うと良い。getElements... の名前を持つメソッドが返す「生きた」リストは、文書状態に応じて自動的にアップデートされます。
var ChildrenCache = document.getElementsByClassName('child');
もちろん、load イベントを待つ必要もありません。文書木の構築に合わせて、勝手に追加されるからです。その分、普通の配列のように扱うと怪我をします。注意して下さい。
この回答への補足
ご回答ありがとうございます。
度重なる質問にも丁寧に解説していただき、とても勉強になりました。
今回はChaire様に教えていただいたgetElementByIdを使用して対応し、
子孫セレクタの排除にも気を配ってみようとおもいます。
今回このようなサービスを初めて利用したのですが、
有識者の皆様に詳しく回答していただきとても助かりました。
No.4
- 回答日時:
リストはあらかじめ取得しておけば早くなるかと。
▼window.onloadや#hoge1 の出力後あたりで
var elems = $("#hoge1 ul.Parents li.child input:[type='checkbox']");
▼処理部分で
var n= elems.length;
for(var i=0; i < n;i++){
if(!elems[i].checked){elems[i].parentNode.style.display="none";}
}
jQuery1文なら
$("#hoge1 input:checkbox:not(:checked)").parent("li.child").hide();
とか、実際の構造に応じて
$("#hoge1 ul.Parents > li.child > input:checkbox:not(:checked)").parent("li.child").hide();
とか。
No.3
- 回答日時:
No.2 補足より。
> getElementById
> formに入れる事で
どちらでも構いませんよ。両方とも最速候補です。
function process (controls) {
var c;
var i;
for (i = 0; c = controls[i]; i++) {
if (c.type !== 'checkbox')
continue;
switch (c.name) {
case 'AAA' :case 'BBB' :case 'CCC' :case 'DDD' :
c.parentNode.style.display = c.checked ? '' : 'none';
}
}
}
process(document.getElementById('hoge1').getElementsByTagName('input'));
// process(document.forms[0].elements);
まあ、form.elements を使う方は「"#hoge1" の内部」という条件を無視していますけどね。実を言うと、querySelectorAll() はネイティブメソッドの中では遅い方です。しかし、"#hoge1 *.Parents > *.child > input'"というセレクタによって、"#hoge1" の存在と、input の親である ".child" の存在が自然に保証されます。上に書いた process() 関数は単純ですが、"#hoge1" が存在しているか、c.parentNode が ".child" であるか、については無視していることに注意して下さい。
ちなみに、document.getElementsByName() を使うべきではありません。フォームを飛び越えますし、meta、param、map などまで拾う可能性があります。今回はどの道、使わないでしょうが。
> 子孫セレクタを排除
子の ">"、隣接の "+" などを使って下さい。子孫の深さがそれほどでもなければ子孫セレクタの方が速い場合もありますが。
---
セレクタを「右から左」に評価するのは、リストから候補をふるい分けるときです。処理速度はリストに含まれるノード数に比例します。
[a, b, c, d].filter(selectors) ===> [a, c]
セレクタを「左から右」に評価するのは、リストの変化をステップごとに追いかけるときです。ステップ数と中間リストの要素数に応じて、処理速度が相乗的に増えます。
[a].map(step1) ===> [b, b, b].map(step2) ===> [c, c, c, c, c]
jQuery は「左から右」方式です。つまりセレクタが短く、中間リストの要素数が少なければ速く処理できます。しかしセレクタが長かったり、中間リストの要素数が多ければ処理速度がガクっと落ちます。
No.2
- 回答日時:
jQuery を使う時点で速度は度外視だと思いますが……。
まだ草案が出たばかりですが、Selectors Level 4 なら次の CSS だけで済む話です。
/* チェックの入っていない input を持つ li.child を非表示にする */
#hoge1 *.Parents > ?*.child > input:not(:checked) {
display: none;
}
これを現在の実装だけで行うよう「変換」すれば良い。
Array.prototype.forEach.call(
// チェックの入っていない input を取得
document.querySelectorAll(
'#hoge1 *.Parents > *.child > input:not(:checked)'
),
function (input) {
// その input の親である li.child を非表示にする
input.parentNode.style.display = 'none';
});
jQuery を使うときも同じです。:checked は標準の疑似クラスですから、jQuery の独自拡張よりも率先して使って下さい。
※jQuery は内部的に querySelectorAll() を試し、その後で独自エンジンを走らせます。速度を考慮するなら、独自エンジンを走らせる回数を減らすべきです。もしどうしても独自エンジンを走らせざるをえないなら、jQuery の特性上、子孫セレクタを極力排除して下さい。
それと、フォーム部品を使う時は form の中に入れた方がスクリプト操作の面で有利ですよ。
この回答への補足
ご回答ありがとうございます。
「Selectors Level 4」の存在を初めて知りました。
「Selectors API 」はかなり便利そうですね 。
書き忘れで申し訳ないのですが、IE7も視野に入れているため、
別の場面で是非手を出してみようと思います。
>※jQuery は内部的に querySelectorAll() を試し、その後で独自エンジンを走らせます。速度を考慮するなら、独自エンジンを走らせる回数を減らすべきです。
jQueryはそのような仕組みになっていたのですね。
今後、知識が着いてきたらjQueryの内部を見てみます。
勉強になりました。
>jQuery の特性上、子孫セレクタを極力排除して下さい。
子孫セレクタを排除といいますのは、
$ (ul.Parents li.child)ではなく、$ (ul.Parents)を使用する。と言う事なのでしょうか。
(ブラウザは、右から左にセレクタを解釈しながら描画する事と関係があったり?)
>フォーム部品を使う時は form の中に入れた方がスクリプト操作の面で有利ですよ。
こちらも記載忘れで申し訳ないです。
最終的にはformに入れ、submit後、PHPで処理を行う予定です。
jQueryを使用しない場合はgetElementByIdをクラス名指定で取得後、
displayをnoneするつもりだったのですが、formに入れる事でもっと効率のいい方法があるのでしょうか?
質問の連続で大変申し訳ないのですが、よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオン自動開閉メニュ...
-
JQuery UIで、表示したタブの中...
-
チェックボックスに入っている...
-
jQueryアコーディオンで複数メ...
-
javascriptで教えてください。 ...
-
【JavaScript】階層関係から要...
-
複数のラジオボタン項目でのテ...
-
JQueryタブのアクティブ アン...
-
JQueryで、liタグの背景に色を...
-
jquery 3の倍数のliだけ色を変える
-
タブ切り替えの初期表示について
-
クリックした<a>タグのみにClas...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
jQueryで同じクラス名のものを...
-
createElementで作成した要素を...
-
jQueryでのドラッグアンドドロ...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryのeqで最後からn番目以降...
-
jQueryで、リンクURLの一致を確...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
文字と数字が混在する要素のsor...
-
onmouseoverの表示切り替えが上...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
-
どの<li><a> が押されたか判別...
おすすめ情報