jQuery 質問スレッド vol.8
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptでDOM用ライブラリであるjQueryのスレです。 次スレは>>950 が>>2 のテンプレ案(本スレで改善案があれば考慮)を元に立ててください このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。 jQueryを使って作る側のスレであって、こんなプラグインありませんか?と聞くスレではありません。 そういうのは自分で探してください。 ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。 JavaScriptの質問は関連スレで質問して下さい。 ■前スレ jQuery 質問スレッド vol.7 https://mevius.5ch.net/test/read.cgi/hp/1478055094/ ■関連スレ JavaScript の質問用スレッド vol.130 https://mevius.5ch.net/test/read.cgi/hp/1501503056/ ECMAScript デス 6 https://mevius.5ch.net/test/read.cgi/tech/1483332914/ JavaScript ライブラリ総合質問所 vol.5 https://echo.5ch.net/test/read.cgi/hp/1465399470/ 少なくともmdnだとメソッドでない関数に最適と書いてある。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions そうするとオブジェクト指向的にthisを使うため、って出自ではなさそうだが。 むしろ関数型的に使うためでは。 イベントハンドラではtargetを使うのが普通というのはそう思う。 >>738 その文書の"thisを束縛しない"の項目に、 >これは、オブジェクト指向プログラミングをする上で煩わしいということが分かりました。 って書いてあるよ そういや関数型に使うんならそもそもthis使わないし短く書けるくらいしか使用上の違いなかったな 別にアロー関数がオブジェクト指向に向いてるというわけでもそうでないわけでもない アロー関数はメソッド自体として使うには確かに不適切 だがメソッド中で関数を定義したりすると必要になるthat=thisなんかは不要になる 適材適所 jsbinで追加出来るjQueryのバージョンに jQuery WIP という版があるのですが、このWIPとは何の略でしょうか? >>744 作成中というような意味ですね とすると、新しいほどいいだろうと思って選んでいましたが あまり使わない方がいいのでしょうね ありがとうございました どんどん使うべきだよ 万が一問題があってもそれを報告すればいいだけだし 自分のスキル向上にもなる 良いことしか無い removeの範囲にdataを持った要素があった場合、 そのdataも解放されるのでしょうか? そこまで気になるようになったのなら自分でソース見て調べたほうが良い もし、そのdata が、削除されないオブジェクトから、参照されていれば、 必要だから、dataはガベージ(GC)されない 生きているオブジェクトからの、参照カウントが1以上あるから メモリリークするかどうか、チェックすべし 参照がなければGCされるということですか? 逆に言うとdataが含まれた要素をjQuery外から削除してしまったら メモリリークになるということでしょうか。 危険ですね? 麻薬の禁断症状は麻薬を使い続ればいいからな。理にかなっている >>752 はイかれてるんじゃないかと正直思う メモリリークなんて普段から怖がってかかるものじゃない プロジェクトを進めてきて一段落する度にちょっと確認してみるだけ それで意図しないメモリの増加があればメモリリークが起きてるのかなとなる そのときにプロファイルをとって調べればいい ただしjQueryのようなライブラリを使ってると調査の難易度が格段に増す Backbone.js は、DOM を削除した際に、そのDOMの子孫に、 イベントハンドラーがあっても削除されないから、メモリリークになるけど、 jQuery では、そういうイベントハンドラーも、自動的にすべて削除するから、 メモリリークにならないとか、何かで読んだ まあ、jQueryをデバッグ実行して、確かめて下さい >>755 イベントハンドラがメモリリークするのは何故かと言うと var element = document.getElementById('id'); element.addEventListener('click', function() { element.style.color = 'red'; },false); みたいなコードを書くと、内部のelement.styleのelementが 外側のelement.addEventListenerのelementを参照して循環参照状態になるから イベントハンドラがelementを掴んじゃってるから、elementを消すだけじゃ 循環参照になってしまうからメモリリークになる 一応今のブラウザはこの問題は解決されたことになってるが。 jQueryの場合は通常以下のような感じで書くので、循環参照することはないのでメモリリークもしない (だってそこに有るのはオブジェクトではなくただのセレクタ文字列だもの) $('#id').on('click', function() { $(this).color({color: 'red'}); // $('#id').color({color: 'red'}); }) replaceWithでも当然 dataやイベントリスナ―の処置はしてくれますよね? >>757 はい。jQueryを使っている限りメモリリークはしません >>758 jQueryは神なんですね ありがとうございました なるほど。確かにjQuery.cleanDataを呼び出しているようだな https://github.com/jquery/jquery/blob/662083ed7bfea6bad5f9cd4060dab77c1f32aacd/src/manipulation.js#L440 replaceWith: function() { var ignored = []; // Make the changes, replacing each non-ignored context element with the new content return domManip( this, arguments, function( elem ) { var parent = this.parentNode; if ( jQuery.inArray( this, ignored ) < 0 ) { jQuery.cleanData( getAll( this ) ); if ( parent ) { parent.replaceChild( elem, this ); } } // Force callback invocation }, ignored ); } jQuery.cleanData に関しては http://blog.livedoor.jp/aki_mana/archives/6919272.html > GitHub で manipulation.js のソース読めば判るとおり、結構頻繁に jQuery.cleanData() が実行されてます。 > ― jQuery.cleanData() メソッドは、data() API として独自に実装された > 「各要素と紐づけられるキー・バリューストア(メモリストア)」に対する処理なので、 > innerHTML を使う場合でも、jQuery.cleanData() を使うなら、まぁ問題無いです。 cleanDataなんていう裏メソッドがあったのですね ありがとうございます >>756 callback の中で event.currentTarget で要素を取得するように書けば 循環参照にならないのでメモリリークは防げることになるよね 連続している複数の要素をひとかたまりのjQueryオブジェクトにすることって出来ますか? それに対してreplaceWithして、その部分をごっそり入れ替えたいのです 全てがある要素の子要素なら出来ると思いますが そういうコンテナを設置せずにやりたいです >>764 複数の要素を一塊にするのが、jQueryオブジェクトの本質みたいなものだから 連続してようがしてまいが一塊にできる。 だけど連続してない場合に「どこと」入れ替えたいのかが区別つかない あなたは連続していることだけを想定しているから、どこと入れ替えても同じ結果になるので 気にしていないかもしれないけど、jQueryは連続して無くても扱えるものなので それを考慮しなければいけない で、どうするかだけど、連続する複数の要素のうち 最初の要素を入れ替え対象とし、その後の要素は消してしまえばいい (実際には処理する順番は逆にすることになるだろうけど) $('li + li').remove(); $('li').replaceWith('<li>a</li>'); これが単純でわかりやすいと思うけど、頑張れば メソッドチェーンで一行で書けるかもね >>765 なるほど〜 先頭一つを残して削除するなんて思いつきませんでした ありがとうございます あとはclass付けるとかsliceとかprevAll/nextAllとか Vanilla JSでどう実装するのか解った上で jQueryを使いたいと思うのですが そういう人のための総括的な解説をしている 書籍を探してます。 もし知ってたら教えて下さい。 >>768 そういう人のためがどういう人なのか分からんが 普通にjQueryの良書でよい コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION) https://www.amazon.co.jp/dp/4798124281 jQueryクックブック https://www.amazon.co.jp/dp/4873114683 >>769 ありがとうございます。 購読検討してみます。 jQueryを使って ある要素が何番目の要素なのかを調べるにはどうすればいいですか? あとセレクタのnth-childとかnth-of-typeが使えるかもね >>773 ありがとうございます 出来ました 要素自体が属性として持っているんじゃないかと思っていたのですが 配列の要素が配列のインデックスを持っていないように DOMの要素も自分のインデックスを持っていないのでしょうね 変数の状態をコンポーネントに反映するみたいなことを jQueryでスマートにやるにはどうするのが一番いいのでしょうか? たとえば変数の状態をドロップボックスに反映させるなど。 もちろんそういう変数を作って呼び出せば出来ますが、 なんかイケてない気がします 反映させる処理をコンポーネント自体に帰属させて呼ぶ感じにしたいです カスタムイベントでしょうか? 最近のフレームワークは 使ったことはないのでよくは知りませんが 変数とコンポーネントの紐付けもやってくれてる感じがします 似たようなことをjQueryでやるにはどうすればいいのでしょうか ×そういう変数を作って ○そういう関数を作って でした 追加で質問です。変数とコンポーネントの紐付け jQueryなどのJavaScriptライブラリやフレームワークを 使わない場合はどうやるのでしょうか? その方法があるとして、jQueryにも応用できますか? >>780 リテラルとは何のことでしょうか >>781 別人ならもっと別人らしく書いてください >>782 ありがとうございます 読んでみます >>782 の記事を読んでいますが 未知のパラダイムの洪水で混乱してきました 素直にデータバインディングライブラリの勉強した方がいいパターンですねこれは・・ だからそう言ってるだろ… でもデータバインディングライブラリはいっぱいありすぎて逆に迷うな。 ある程度高機能になったらそこまでやるならもうvuejs使えよってなっちゃうからそれよりシンプルかが判断の分かれ目か。 https://github.com/gwendall/way.js/ とかどうかね?あとrivets.jsとか… >>785 確かに単機能でシンプルな方がいいですね 見てみます ありがとうございました 以下のような、横に伸びるtableのtdで同じ文字列が連続した場合 colspanでセルを結合するロジックを組みたいのですが どのようにすれば実現できるか悩んでおります <table> <thead> <tr> <td>2018</td> <td>2018</td> <td>2019</td> </tr> </thead> </table> ↓以下のように同データをcolspanとして結合するロジックが作りたいです なおデータはソートされております。 <table> <thead> <tr> <td colspan="2">2018</td> <td>2019</td> </tr> </thead> </table> よろしくお願いします >>787 過去スレに似たような話が出たけど なに? コピペ? また同じ話したいの? $('td').each (function() { var prev = $(this).prev(); if ( prev.text() === $(this).text() ) { var num = prev.attr('colspan'); // 3連続以上にも対応 num = num ? parseInt(num) + 1 : 2; $(this).attr('colspan', String(num)); prev.remove(); } }) データがソートされてるなら、自分と直前(兄、prev)の要素が、 同じかどうか確かめればよい 兄が自分と同じなら、兄を削除して、自分にcolspanを付ける セレクターには、id を付けて、絞り込んで下さい。 <tr> が、2行以上あると、誤動作するかも >>790 > <tr> が、2行以上あると、誤動作するかも 普通複数あるだろw 表のヘッダーだけじゃないのか? 表のデータも、1つのセルにまとめるのか? <tr><td>A</td><td>A</td><td>B</td></tr> <tr><td>B</td><td>C</td><td>C</td></tr> >>790 で、<tr> が、2行以上あると誤動作するかもって言うのは、 上の例で、1行目のB と、2行目のB がつながってしまうから これを避けるには、1行ずつ分けて、処理すべき >>790 動作を確認できました 超リスペクトです ありがとうございます! 他の方が指摘している部分で問題が無いか確認しつつ、参考にさせて頂きます >>792 自分はtrごとにclassを付けて対応しました あくまでヘッダで使いたかったので煩くはならなかったですが、10行超えるような行で適用すると泥臭くなりそうだとは思いました 複数行にも使うの? 複数行の場合は、 >>795 の例では、2行目のB に、colspan="2" が付くから、ダメだろ 1行ごとに一旦、処理を切らないといけない >>789 は、難解すぎて、訳がわからない >>790 を複数行にも対応できるように、修正した $('td').each (function() { var prev = $(this).prev(); // そのtr の、最初のtd は、処理しない。continue if (prev.length === 0) { return true; } if ( prev.text() === $(this).text() ) { var num = prev.attr('colspan'); num = num ? parseInt(num) + 1 : 2; $(this).attr('colspan', String(num)); prev.remove(); } }) >>799 > は、難解すぎて、訳がわからない 縦横量対応 + jQueryプラグイン化してあるからねw 短いのであれば、こっちにあった(少しだけ変更してみた) コードの説明はリンク先へ http://toro.2ch. sc/test/read.cgi/hp/1452081417/732 $('td').attr('colspan', function() { return $(this).text() === $(this).prev().text() ? null : 1; }).filter('[colspan]').attr('colspan', function() { return $(this).nextUntil('[colspan]').length + 1; }).end().remove(':not([colspan])'); そういや >>789 は更に最初からcolspanがある場合にも対応していたはず 色々と参考コードをありがとうございます 799さんのコードは理解が難しかったですが、改造案件ではこういうのをワンサカ見るんだろうなと思うので理解できるよう努力したいと思います 何度も同じjQueryオブジェクトを使う時には 今でも一旦変数に代入した方がいいのでしょうか? $document = $(document) のように。 パフォーマンスから言えば代入した方がいいはずですが、 もう気にしなくていいような気もします マシンが高性能になっているので マイクロ秒レベルのパフォーマンスの違いなんて気する時代ではないのでは? という意味です というか1マイクロ秒の違いすらあるのか怪しいですよね・・ documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ 確かに引数に文字列を渡す場合はパース処理が入るので何度も実行したくはないですね 引数がDOMオブジェクトの場合は許容範囲の感じがします 場合によりけりということでしょうか ありがとうございました みんなjqueryオブジェクトには$付き変数つかってる? それとも気にしない派? おれは気にしない派 >>808 > documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ 具体例あげられますか? そこそこの規模のDOMを用意し、CSSセレクタでパフォーマンスの観点から避けるべきと言われていること(ユニバーサルセレクタとか子孫セレクタとか一般兄弟セレクタとか)をあえてすべて踏む長めのセレクタをぶっこんでトライ! まさか計測まで人にやらせるつもりじゃねーだろうな >>813 計測はこっちでやってやるよ お前は黙ってセレクタを書け >>814 じゃ黙ってDOM用意しな。セレクタはDOM依存だからな。 セレクタの遅さはDOM依存じゃないが? そんなにDOM用意しろって言うなら ほらよ。遅いセレクタ書いてみなw <span>a</span> DOM依存であることを示してるように見えるのだが… >>817 オレなら >>816 のaを選択するのにたっぷり0.1秒はかかるセレクタを書くことができるッ! しかもそいつはつい先日納品したプロジェクトで使用したばかりのやつだッ! >>804 2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき 変数に入れずに、2回書いたら、その間にDOM に、 何か変化があるのかも、と思ってしまう 変化が無いなら、変数に入れた方が、わかりやすい $(event.currentTarget) とかもわざわざ変数に入れるんですか? コールバックの中でvar $this = $(this);とか稀によく見る >>821 入れてもいいってだけで基本的に変数に入れない。実行速度に問題があって 変数に入れると速度の問題が解決するって場合だけ入れる。 > $(event.currentTarget) > とかもわざわざ変数に入れるんですか? 入れない $(this)もそうだが、カッコの中がDOM要素の場合は、セレクタよりも遥かに 速度が早いので変数に入れても問題が有る速度を解決することにはつながらないだろう それから変数に入れる前にチェインでつなぐことを考えたほうがよい。 チェインするのは変数に入れるのと同じ効果がある またそもそもチェインすらいらないかもしれない 例えばこういう書き方もできる http://api.jquery.com/jQuery/#entry-examples-1 $( "<div/>", { "class": "test", text: "Click me!", click: function() { $( this ).toggleClass( "test" ); } }) http://api.jquery.com/css/#css-properties .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) http://api.jquery.com/attr/#attr-attributes $( "#greatphoto" ).attr({alt: "Beijing Brush Seller", title: "photo by Kelly Clark"}); この使い方も重要 http://api.jquery.com/attr/#attr-attributeName-function $( "#greatphoto" ).attr( "title", function( i, val ) { return val + " - photo by Kelly Clark"; }); 1. title属性を取得して 2. title属性を加工して 3. title属性を再設定する ということを変数無しでできる 引数に関数を渡すことで、変数に一旦入れる必要がなくなる。 ↓つまりこんなコードを書かなくて良くなるということ var $greatphoto = $("#greatphoto"); var title = $greatphoto.attr("title"); title = title + " - photo by Kelly Clark"; $greatphoto.attr("title", title); >>825-826 ありがとうございます 知らない方法ばかりです 関数を渡してフィルタみたいな処理ができるのは良さげです 変数をなるべく使いたくないっていうのは、 関数型っぽく書きたいっていうところから来てるんですよね >>827 名前を使いたくない ってのが一番大きい理由だと思うよ おれ自身はチョイ関数でもバンバン定義する派だけど、使いたくない理由もわかる >>820 804ではないが参考になった 以前速度差ないとのことで変数に入れずにいたが そういうことならわかりやすくていいですね 変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな >>820 が変数に入れるべきと言った途端 > 2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき ↓これだよw > 変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな >>820 > 変数に入れずに、2回書いたら、その間にDOM に、 > 何か変化があるのかも、と思ってしまう > > 変化が無いなら、変数に入れた方が、わかりやすい どういうこと? 変数に入れた所で、変化するでしょ? $id = $('#id') $id.text(123); $id.text(); // 変数に入れたのに123に変わってる jQueryにDOM要素の状態をさせるメソッドは たくさんあるけど、どれも変数に入れても変化するものばかり 唯一の例外はremoveしても(DOMの状態は変化しているが) jQueryオブジェクトには参照が残ってるってことぐらい それだけなのに"変化がないなら変数に入れたほうがわかりやすい"は大げさ 変数に入れてもDOMは変化してる 変数に入れていれば、その間になにも変化がないように言い方は 誤解のもとでしかないのでやめたほうが良い $ul = $('ul') console.log($ul.children().length) // 5 $ul.children().remove(); console.log($ul.children().length) // 0 -------- $ul = $('ul') console.log($ul.children().length) // 5 $ul.append('<li>') console.log($ul.children().length) // 6 -------- $ul = $('ul') console.log($ul.parent().attr('id')); // undefined $('#id').append($ul) console.log($ul.parent().attr('id')); // id いや、再代入してないよw ----はただの区切り 別々の話ね。 >同じjQueryオブジェクトを使う時には とあるのに何入れ替えてるんだよw ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.4 2024/05/19 Walang Kapalit ★ | Donguri System Team 5ちゃんねる