元スレjQuery 質問スレッド vol.8
JavaScript覧 / PC版 / みんなの評価 :
851 = :
そして、これを踏まえて説明すると、
jQueryではメソッドチェーンでつなぐことで
変数に入れなくても、変数に入れたのと同じ状態を作ることができる。
852 = :
>>850
問題文ってこれ？
> 804 名前：Name_Not_Found[sage] 投稿日：2018/04/09(月) 12:47:31.90 ID:???
> 何度も同じjQueryオブジェクトを使う時には
> 今でも一旦変数に代入した方がいいのでしょうか？
> $document = $(document)
> のように。
> パフォーマンスから言えば代入した方がいいはずですが、
> もう気にしなくていいような気もします
じゃああんたはその次のレスを読もうか？
そのレスが間違ってるって話をしてるんだから
853 = :
変数に入れたらDOMに変化がないと思うだろ！
いや、思わんね（笑）
これだけの話
854 = :
ちなみの最初の話をすると
$document = $(document)
変数に代入しなくても、document変数に参照が残ってる。
$element = $(this)
変数に代入しなくても、this変数に参照が残ってる
element = document.getElementById('id')
$element = $(element)
変数に代入しなくても、element変数に参照が残ってる
わけで、毎回 $(documet)、$(this)、$(element) を実行しても
（DOMではなく参照が）変わらないことは保証される
855 = :
一般的にイベントのデレゲーションは負荷軽減に繋がると言われていますが
$(document).on('click','.hoge a',fn)
のようにセレクタで指定している場合、
クリックのたびにイベントが起きた要素がセレクタと一致するかを調べるので
結構負荷が高くなるのではないかと思いました
$('.hoge a').on('click',fn)
のように要素に直接リスナを登録した場合、セレクタの解釈はリスナの登録時だけなので、負荷は小さくなるのでは？
ただデレゲーションの場合、リスナ登録時に存在しないDOMのイベントも捕捉できるという意味もあるので
簡単に置き換えることはできませんが
856 = :
表に、100セルがある場合、
各セルに、イベントハンドラーを付けると、100個になる
これらの処理が似ている場合には、
表に、1つのイベントハンドラーだけを付けて、
各セルの座標値を、計算した方がよい
857 = :
もう必死だなｗ
858 = :
>>855
負荷とひとまとめにしてるけど、
典型的な速度を取るかメモリを取るか問題やね
デレゲーションを使うと、
1. イベントハンドラの設定が1回ですむ（速い）
2. イベントハンドラが一つで済む（メモリ少ない）
3. イベント発生ごとに発生した要素のチェックが必要（遅い）
4. 要素を増やしてもイベントハンドラの設定は不要（速い）
要素ごとにイベントハンドラをつけると
1. イベントハンドラの設定が要素の数だけ必要（遅い）
2. イベントハンドラが複数必要（メモリ多い）
3. イベント発生しても発生した要素のチェックが不要（速い）
4. 要素を増やす時イベントハンドラの設定が必要（遅い）
イベントハンドラの分メモリが必要と言っても関数の中身自体は共通化できるので
イベントハンドラを持っていますよーという情報のメモリ
またセレクタに一致しているかどうかは、比較的最近のブラウザなら
Element.matchesメソッドがDOM APIに追加されてるのでさほど遅くないはず
で結局の所トレードオフ問題でどちらが良いかはやってみないとわからないし
環境によって変わるし、DOMの構造によっても変わるだろうし、
俺なら気にせずデレゲーション使うだろうな
859 = :
>>826
の、上の程度ならもちろん変数使わないが
実際複雑になったり長くなったりすると下に近くするな
好みだが深くするのが嫌なので
860 = :
>>859
それはそもそも関数が長いのが問題
861 = :
>>857
コードまで書いて一生懸命答えてても元文読み違えてたら全て無駄
の典型的パターンだよな
862 = :
>>859
同じく。↓とか
$('#hoge').children('li').eq(計算).children('span').text(なんたら).attr('hage', かんたら);
863 = :
$('#hoge')
.children('li').eq(計算)
.children('span').text(なんたら).attr('hage', かんたら);
って書けば良い
改行できない病かなにかか？
864 = :
こりゃ酷いな
全然意味わかってないことにワロタ
865 = :
じゃあその意味を説明しろよｗ
866 = :
>>864
むしろ流れ的にどうやったら改行の問題と読んだのかそのプロセスが知りたい
学生のテスト対策のヒントになるかもｗ
867 = :
いや改行の問題なんて言ってないだろｗ
改行を入れることで、読みやすくできるという話だよ
変数に入れればいいって言ってるやつだって
メソッド実行のたびに変数にだって入れないだろ？
「わかりやすい単位で変数に入れる」というはずだ。
だからそのわかりやすい単位で改行をいれればいいだけ
868 = :
>>859
ライブラリなどのサンプル見るとほとんどvarにセットしてる
869 = :
>>867
もういいよ、無理すんなって
益々墓穴掘ってる
870 = :
>>869
なんか言い返せよｗ
871 = :
$('#hoge').children('li').eq(計算).children('span').text(なんたら).attr('hage', かんたら);
を変数に入れるってどうするつもりだったんだろうか？
var $li = $('#hoge').children('li')
var $span = $li.eq(計算).children('span')
$span.text(なんたら).attr('hage', かんたら);
こうか？
$('#hoge').children('li')
.eq(計算).children('span')
.text(なんたら).attr('hage', かんたら);
ならこれで良い気がするな。
変数に入れるバージョンから、変数を取り除いただけ
それよりも>>863の方がわかりやすい気がするのは
行の最初に対象とするターゲットが来てるからかな
872 = :
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
これは、jQuery のeq のソースコードだが、
これぐらい少なくても、this.length を2回使わない
同じものなら、変数に入れる。
その方が保守しやすく、最適化しやすく、少し速いかも
873 = :
>>871
計算やなんたらやかんたらを変数かと
874 = :
ここは相変わらず、jQuery君が他人に噛みつき、荒らし回ってるんだな
875 = :
スレタイ読めないのか
876 = :
>>875
スレタイのどこに「他人に噛みつき、荒らし回る」と書いてある？
877 = :
>>873
>>826の話とずれてる。
>>826は処理対象を変数に入れるって話
設定値を変数に入れるって話じゃない
878 = :
どうでもいい話をいつまで引っ張るんだか
879 = :
今回は負けない！って思ってるんでしょｗ
880 = :
そもそも>>804 >>820に対して（それを無視して）値を入れ替えてることがズレてる
誤解のもとという忠告もわかる
速度に関してはどっちでも変わらんから好みでやればいいだけ
>>859の変数使う好みに対して改行で解決しようとしてることがずれてる
これも好みでやればいいだけ
881 = :
blurメソッドを呼ぶと、
その要素に実際にフォーカスがあるかどうかに関わらずfocusoutが発生すると気づきました
これおかしくないですか？フォーカスがないんですから。
結果、二度focusoutが発生してしまい、変な嵌まり方をしてしまいました
883 = :
だめです
884 = :
何故駄目なんですか？
886 = :
いいえ
887 = :
何故ですか？
888 = :
if (!$('セレクタ').children().length) {
$('セレクタ').remove();
}
みたいな処理をもっとスマートに書けないでしょうか？
メソッドチェーンで繋いだ一文で書けたらいいと思うのですが
889 = :
>>888
> if (!$('セレクタ').children().length) {
典型的な手続き型的なコードだねｗ
通常は「lengthみて要素があるかどうかを確認する」というコードはまるまる省ける。
状況にもよるだろうけど、俺はこれが必要な場合を思いつかない
で、回答だけど、まずCSSを使って、セレクタ:empty { display: none; } じゃいかんの？
わざわざremoveしなくても、画面上見えなくていいのであればコレでいける
ただしセレクタの中にはスペースなども含めて完全に空になってないといけないけど
次に実際に消す方法として、:has疑似クラスを使ったもの
$('セレクタ:not(:has(*))').remove();
:has擬似クラスはCSS4相当のものでブラウザネイティブでは実装されていないが、
jQueryは独自で実装しているので使える。IE11でも動いた。
http://api.jquery.com/has-selector/
こっちは完全に空じゃなくてもいいけど、タグなしで直接テキストが書かれていても
消えてしまう。といってもそれは>>888も同じだから問題ないだろう
あとはjQueryの.not や .has メソッドを使って
これと同じような結果になるコードをかけばできると思うけど
ちょっと面倒そうだな
890 = :
>>889
ありがとうございます
フィルタで絞り込むという発想がなかったので、学びが大きかったです
:hasとか:notとかはじめて使いました
ありがとうございました
891 = :
hasフィルタ/メソッドの対象は子要素ではなく子孫要素なんですね
子要素と書いているサイトが大量にありますが・・
対象を子要素に限りたい場合はどう書くのがいいのでしょうか？
892 = :
>>891
え？
子要素がない時はremoveする
ただし子要素が無くて子孫要素がある場合はremoveしたくない
ってこと？
子供がいないなら孫もいないでしょ？
893 = :
>>891
#id:has(> .class)
894 = :
>>892
いえ、それはもう解決したので
別の話としてです
895 = :
>>893
試してみましたが子孫も含まれるようです
896 = :
>>895
試してみたコード書いて
897 = :
>>896
すみません
書こうと思って見直していたら、
要素セレクタ部分が深い階層の要素にマッチしていたための勘違いと分かりました
要素セレクタ部分を第一階層にしかマッチしないようにしたら、たしかに子要素だけに限定出来ました！
ありがとうございます
ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか？
jQueryを結構長く使ってきたつもりですが、こういう書き方を今まで見たことがありません
898 = :
> ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか？
CSSの基本だから調べて
:hasはjQueryによって先行してサポートされた疑似セレクタだが
文法自体はjQueryが決めたものじゃないし
基本的なものはCSSのセレクタとまったく同じ
899 = :
>>897
基本です。結合子は全部覚えときましょう。
http://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
900 = :
CSSの親子関係の>と同じなのですね
>.hoge
は
*>.hoge
つまり
「何らかの要素の子要素の.hoge」
という意味になって、
これをhasと組み合わせることで子要素だけが選択できているのですね
親子セレクタの>は知っていましたが
特定数の階層を示す未知の記法なのかと思って混乱してしまいました
ありがとうございました
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript一覧へ類似してるかもしれないスレッド
- jQuery 質問スレッド vol.7 (1001) - [96%] - 2017/11/1 7:45
- + jQuery 質問用スレッド vol.7 + (136) - [76%] - 2022/12/5 13:00
- JavaScript の質問用スレッド vol.132 (1001) - [51%] - 2017/3/22 8:00
- + JavaScript の質問用スレッド vol.82 + (1001) - [48%] - 2011/1/19 7:54
- + JavaScript の質問用スレッド vol.89 + (1001) - [48%] - 2011/9/4 4:17
- + JavaScript の質問用スレッド vol.88 + (1001) - [48%] - 2011/7/20 7:03
- + JavaScript の質問用スレッド vol.87 + (1001) - [48%] - 2011/6/21 6:33
トップメニューへ / →のくす牧場書庫について