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/ >>569 次のレスってどれのこと? 質問者: 140 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 10:57:06.54 ID:??? > .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく > $('.aaa').removeClass('bbb ccc ddd・・・'); > を > $('.aaa').removeClass().addClass('aaa'); > とするのはあり? 質問者への問題点の指摘: 142 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 11:50:24.50 ID:??? > >>140 > それだと静的に付けたclassまで消えちゃうじゃん 質問者の次のレス:143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:??? > >>142 > そうなんだけど・・・の管理が面倒で > 変更の度にそこも付け加えなくてはならなくて > 最初つけるclassは1,2個と少ないので楽かなと 質問者の次のレスを解説すると 1. そうなんだけど => 問題点への指摘の同意 2. ・・・の管理が面倒で => 面倒な部分 3. 変更の度にそこも付け加えなくてはならなくて => ・・・の部分が変わる 4. 最初つけるclassは1,2個と少ないので楽かなと => 個数は不明だが、少ないのでまだましだということ これに対してdata-*属性を使った場合は、全ての問題が解決する classは論外だが何でもかんでもdata-に頼るべきではない <custom-postit data-form=circle のように基本的に使うものであって、 ある特定のJS内で完結する場合の要素へのデータの紐付けはWeakMapを使うべき >>570 まだ続けたいのか >>573 kwsk >>574 詳しく言うとJS内で完結するというのは主にCSSと連携しないってことだよ CSSからJS内の変数は読み書きできないから変数の値が○○の時に色を変えるとかはできない data-ならCSSと連携できるがそれが必要ないなら場合はJSでいい もともとは全部classに入れていたわけだけど、classをCSSと連携しない使い方をしてるなら data-ではなくJS側に全部持ってこれるということ 今回がどっちに当てはまるのかはしらないけどね ん?元はclass使っていたってことは、CSSと連携したいってことでは? しきりにWeakMapを連呼してるのは、オブジェクトが消えてもメモリリークが 起きないってことを言いたいのかもしれないけど、それはjQueryのdata()メソッドでもできること (質問者がdata()メソッドの存在を知らなかった可能性はあるけど) http://api.jquery.com/jQuery.data/ > The jQuery.data() method allows us to attach data of any type to DOM elements in a > way that is safe from circular references and therefore from memory leaks. > We can retrieve several distinct values for a single element one at a time, or as a set: もともとclassを使っていた以上CSSと連携させたいと思うのが普通で それをJS側に持ってこれるとは思わないな。 > ん?元はclass使っていたってことは、CSSと連携したいってことでは? ただの思い込み その理屈で言えば、WeakMapでできるというのも思い込みなわけで $(V.aaaV).attr(VclassV, VaaaV); >>579 最初はそれに気づかずに、CSSと連携できないって 指摘されて意見を変えたみたいねw 言っとくけど俺は573以降ここまでレスしてないから それに意見を変えたって、一体どういうこと? 意見は全部573に含まれてて完結している 書いたとおり、要素とデータを結びつけるときには必ずしも要素の属性を利用しなくとも WeakMapの方が勧められる『場合もある』と言っただけ そしてその理由は主にセマンティクス上のもので機能の優劣を述べたつもりもない 間隔としてはグローバル変数をむやみに使うなと同じような小言 それ以上でもそれ以下でもない 大人ならすぐ他人を煽ったり話を茶化して非建設的な流れに持っていくのは辞めろ >>576 文は長いが書いてあること全然詳しくないのだが 具体的にお願いできないかな >>583 最初から意見かえたのか? >> 438 > まだやっていたのか > 静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる > WeakMapを使えば良いだけ >>582 タグのclassを使う代わりに、JavaScriptの変数にしろっていう意見でOK? 要するにそれを使ってスタイルを当てる、とか カスタム要素で利用する属性である、とか 他のライブラリやモジュールから利用される、とか 第三者と共有する必要があるために、データをおおやけにする意味があるならいいが そうでなくJSで自分自身の閉じた空間内でメモ書きがしたいだけなら 要素の属性を使うのは下品じゃないかということだろう >>585 一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには 普通要素の属性を使うもんだと考え方が狭くなってないか?ということ それと一般的抽象的に考えて、オブジェクトとデータを結びつける効果的方法である WeakMapをもっとどんどん使っていこうよという意見 いや、class属性でやっていたものをWeakMap使えばいいっていうのが 必ずしも正しくないって話だろ。cssで使えないんだから なんでもかんでもWeakMapで解決するような言い方をするからいかんのだ >>587 > 一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには 話がずれてるよ 要素とデータを結びつけたいなんて誰も言ってない class属性のメンテナンスが面倒くさいって話をしてる >>588 自分はWMを使う方が良いケースもあると言っただけであって なんでもかんでもWMでなんて一言も言っていない >>589 それを言っちゃあそもそも論が出てきた最初の質問から5スレ後には既にずれてて 今や一般的な話になっている そのクラスだって単にjQから利用するためのラベル付なのかもしれないしね >>589 要はsourceの意図 classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ data-*="hoge" にしても結局は製作者の意図によるもの ま、個々の勝手だが >>584 > 最初から意見かえたのか? 何言ってるかわからん 誰か別人と勘違いしてないか? >>587 それは一理ある >>589 >class属性のメンテナンスが面倒くさい それってdata君の言い分だよな 少なくとも質問者はそう思ってない もっといい方法もあるよももっともだが質問者は断ってるしな >>590 > 自分はWMを使う方が良いケースもあると言っただけであって それをいうなら、俺だって今回のケースでは data-*属性をつかうと良いというだけで、 すべての場合でdata-*属性を使えなんて言っていない つまり、俺が今回の問題に対してレスしている所に横から割り込んできて、 今回の問題とは無関係な話を始めたお前がおかしい >>593 > それってdata君の言い分だよな 質問者が言ってるよ ↓ほらね 143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:??? > >>142 > そうなんだけど・・・の管理が面倒で > 変更の度にそこも付け加えなくてはならなくて > 最初つけるclassは1,2個と少ないので楽かなと >>591 > classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ その話は>>210 で俺がすでにしてる > ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って > そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw > whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw >>594 自分が言いたいのはその2つのどっちが優れているかではなく、 他の有効なやり方だってあるんだし、細かな意味的なことだって重要 だからそれぞれ適材適所バランス良く使おうねということ 今回のケースにしたって情報が不足してるんだからこれが最適だとかいう回答はできないから揉めている 結果一般論的にこれまでの全ての流れを踏まえて勝手なまとめ的にそういった感想を述べたまでで 君に当て付ける気なんて微塵もないし、完全に被害妄想 >>596 無理やりとかw どちらにしてもhtmlとしては個人の単なる部類に過ぎないし、文書構造からして無意味なこと あくまで主観に過ぎない >>595 横から失礼 data-*にしてremoveClass()の部分はどうすんの? 得体のしれないclass(相当)がある場合とない場合で >>599 話を再確認しようか? 今回の話はdata-*属性を使ったら楽に実装できるという話であって 今回の話にremoveClass()が必要か?という話を先に決めないといけない 答えを言うと今回の話にremoveClass()は必要ない 今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。 今回の話はclass属性を無理やり使ってるのをやめて data-*属性を使えばシンプルに実装できる。という話だから まあ別にremoveClassなんて簡単な処理なんだけどねw var data = "foo foobar foo bar"; console.log(data.replace(/(^|\s)foo(\s|$)/g, ' ')); こんな感じかな $(・・・).attr('data-class', function(attr) { return attr.replace(/(^|\s)foo(\s|$)/g, ' '); }); アロー関数を使えば一行 $(・・・).attr('data-class', attr =>attr.replace(/(^|\s)foo(\s|$)/g, ' ')); これ以上減らしたければjQueryプラグインを作れば良いんじゃないかな? 一応CSSには[attr~=value]というclassっぽく解釈する属性セレクタが有るから 属性を空白区切りの語のリストとして操作するプラグインは 準標準といってもいいぐらいの価値はあると思う。 折角DOMTokenListが使えるclassListを使わずに dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか 正気の沙汰とは思えんな そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね 全くシンプルじゃない スマートフォンがスマートじゃないのと同じこと >>604 おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。 それまでjQueryを使わない場合に、普通にやっていたことなんだが ほんと正気の沙汰じゃなかったよねw ほらねw だから最初に今回はremoveClass()は不要っていう話をしようって 言ったんだが。 今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに 話が通じないのは馬鹿だからか卑怯だからか わかった。今回の話はdata-*属性を使ったほうが シンプルにできる。 で? で?と言われてもな 今回はdata-*属性を使ったほうがシンプルにできるから data-*属性を使いましょう。とかしか 何が聞きたいの? 599です >>600 >今回の話にremoveClass()が必要か?という話を先に決めないといけない ごもっとも >>602 ,603 removeClass()でいいかな、わかりやすいし data-*属性を使おうっていう話は 一つのdata-*属性に複数の値を空白区切りで 入れたりはしないのでremoveClass()は単に attr('data-name', '') でいいんだよ いっぺんに複数の値を初期化したければ attr({data-name1: '', data-name2: '', data-name3: ''}) という書き方もできる そういやremoveAttr()ってのもあったな スペース区切りで同時に複数の属性を消せるようだ そうか一個しか存在しないclass属性は一つの属性に複数入れるために スペース区切りで入れるしかないけどdata-属性は複数作れるから そんなことしなくていいいだな >>612 それだと > 変更の度にそこも付け加えなくてはならなくて と変わらないぞ >>615 え?ぜんぜん違う。 classはいろんな目的で使われるから、想定外のものだって入る可能性がある 特にデザインでclassを使うのはごく普通に行われる だから消す時に想定外のものが入っている場合どうするかという話が出てくる data-*属性だと想定外のものは入らないのでそういった問題がない 具体的にいうと <span class="target ?? aaa bbb ccc ・・・">というものから、 .targetのクラスという条件に当てはまるものから、aaa, bbb, cccのように アルファベット3文字のものだけを消そうとすると面倒 removeClass()を使って全部消すと、消してはいけないtargetや??まで消える。 だけど消したいものをdata-*属性に入れていれば <span class="target ??" data-name="aaa bbb ccc ・・・"> .targetクラスという条件に当てはまるものから、data-name属性を消すだけで targetと??に影響をあたえること無く消したいものだけを消せる >>616 逆に言うとライブラリの想定外のものが消せない >>461 > 次のスレタイ=マウント取りたくてウズウズしているスレ data君がマウント取りたくてウズウズしているスレ お世話になります。 【使用しているJquery:ScrollMagic】 質問内容:setpinで要素固定、reverse:falseで固定を1度のみで指示 最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか よろしくお願いします。 >>619 今回の話に関係ない >>620 今回の話に関係ない >>621 それ言ってるのお前だけだぞw >>622 ここはjQueryのスレなのでjQueryに関係ないものは対象外 >>624 はぁ〜、本当に説明しないと分からんのか removeClass()の引数なしっていうのは、 削除するクラスを一つ一つ書くのが面倒だから 全部消すためにそうしてるんだよ それをdata-name属性にうつしたのなら 全部消すのはremoveAtrr('data-name')か、 atrr('data-name', '')で終わりだろうが なんでremoveAttrの引数なしが関係するんだ馬鹿か data君は、そもそもclass属性の存在自体が不要と言いたいのか? 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で dataはその要素固有の状態を表す自由に命名できる属性として 住み分けされてると思うんだけどな なんかdata君の話聞いてたらそもそもdataをdatasetではなく 単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし なんか残念だよね つうか>>616 の用途ならそれこそMap使ったほうが良くね data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ map使え派は全くサンプルコードを示さない。class派もdata派も出してるのに >>616 > data-*属性だと想定外のものは入らないのでそういった問題がない それはただキミの想定でのお話だろ?w $(name).attr('class', name); これで解決 また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄 jQueryらしくない >>626 > data君は、そもそもclass属性の存在自体が不要と言いたいのか? そんなこと言ってない。今回の話では、今回の話では、(二度ry data-*属性を使えばCSSと同じようにデザインも適用できて シンプルに書くことができるという話 >>626 > 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で そういう使い方をしているなら、 そもそも一部を残して残りのクラス値は消去 なんて仕様は生まれない。 だから、今回の話では、今回の話では、(二度ry classの一般的な使い方をしていないということ だからそれらclassの一般的な使い方をしていないところだけを data-*属性に移動すればシンプルになる >>627 > つうか>>616 の用途ならそれこそMap使ったほうが良くね Mapを使うとclass属性と同じように使うことが不可能になる class属性の代わりの案なのだから、class属性でできることが できなくなる方法はだめ Mapで何が不可能になるかはすでに何度も言ってるが、 CSSでスタイルを適用できなくなる >>627 > data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ もともとclassを使っても衝突の可能性がある。 あんたがclass属性などは衝突が有るものは全て使うなと 言いたいのなら、はっきりそう言え class属性などは使うなとはっきりいえ 「衝突の可能性がある」は事実では有るが問題点ではない >>629 > それはただキミの想定でのお話だろ?w >>143 で書いている > 最初つけるclassは1,2個と少ないので楽かなと 最初につけるクラスは1個の場合もあるし、2個の場合もある そして問題が解決したわけではなく、楽と書いていることからもわかるように これもいやだけど少ないのでまだ楽だろうという話 >>629 > また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ ないわーwwww class="aaa bbb" の bbbの内容をcssで書き換えて 今度はbbbを消す代わりに、cssをもとに戻すのかよwww 思いつきで語るな >>635 無意味な値のないカスタム属性をくっつけているよりスマートだし、 この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい それがjQueryを使用することで得られる生産性の向上 > $('.aaa').removeClass().addClass('aaa'); $('.aaa').attr('class', 'aaa'); // 最小限に明確な意図する結果にする これが最良 >>636 > 無意味な値のないカスタム属性をくっつけているよりスマートだし、 だから理由かけや 説得力皆無だ >636 > この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む bbb, ccc, ddd のどこが視覚的な意味合い? >>636 > 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい その理屈だと、jQueryで属性を変える所すべて HTMLから取り除けってことになるが?w class属性も含めて >>637 それだと.aaaの他に消してはならない.hogeが追加された時 結局ソースコードに修正が必要になります。 注意 >>637 はすでに反論があって その反論からは逃げています eachで配列を読み込み 横向きの表を作成したいのですが、 どのようなコードで描画できるでしょうか?よろしくお願いします。 <html> <head> <title></title> <script src="https://code.jquery.com/jquery-3.2.1.min.js" ;></script> $(function(){ var arr = [ "行1データ", "行2データ" ]; $.each(arr, function(i, val) { $('tr').append('<td>' + val + '</td>'); //行ごとにデータが作られ駄目でした }); }); </script> </head> <body> <table border="1"> <tr> <td> 行1 </td> </tr> <tr> <td> 行2 </td> </tr> </table> </body> </html> 別スレにこの間書いた 値からテーブルを作るコードはデータの部分を除いてたったの6行でできる。 (アロー関数を使えばもっと減らせる) https://jsfiddle.net/1uopxycn/ var data = [ [{text: 1, colspan:2},{text: 3}], [{text: 1},{text: 2},{text: 3}], [{text: 1},{text: 2},{text: 3, style: 'color:red'}], ]; var rows = data.map(function(row) { return $('<tr/>').append(row.map(function(attrs) { return $('<td/>', attrs); })); }); $('#table').append(rows); >>625 変更追加の度にnameを書き換えなくてはならないのでダメです >>633 classっていうのは共有のもので皆が追加していくもんだ きちんとスペースで区切って使うというコンセンサスがあり衝突はしない 一方data-*はだれがどう使うか分からない removeClass()って何気に便利だな 値関係なくとりあえず全部消してくれる この間classで衝突したけどなぁ? どうやれば衝突しないん? まだdataかclassかweakmapかって話してたのかw >>645 初学者なのでeachでゴリゴリ回す発想しかありませんでしたが そのような書き方が出来るのですね 参考になります ありがとうございます アロー関数を使えばもっと減らせる と書きつつあえて使わないのはなんなの? そっちのほうが分かりやすいと思ってんの? <要素 class="bbb eee fff jjj">と、 要素に値(class)を持たせ、値は動的に変化します この要素は今どの値を持っているかはclassNameで簡単に取得できますが classを使わずdata-*で持たせた場合はどう取得するのでしょうか? アロー関数無しでお願いします >>656 穿った見方をすれば、これまでの話の対抗策として書いた感じがするが、 要件が違うから、"今回の場合"は classを使ったほうが良いよと "この間の例"では、data-*属性を勧めていた俺が答えるw いやいや、『この間の例』は要件や目的がはっきりしてないんだから 結局何が最適かは分かりませんと言うことがFAでしょ だからこういう場合には、とか一般的にはとか話が広がってたのに その中で大口叩いておいて細かいことに逃げるのは感心しないな いくら屁理屈こねようとも、周りの人へ感覚的にどう思わせたかってことが大事だからね >>659 は自分の書いた内容を自分で見たほうが良い。 おまえはその書いた内容の話をしたいのかと >>659 >結局何が最適かは分かりませんと言うことがFAでしょ >だからこういう場合には この辺りはもっともだし、よくわかるが後半よくわからん DOM に状態を持たせるな! DOM に状態を問い合わせるな! React を使え! 状態が要素の外側の見た目振る舞いに関わるものならclassで良い 例えば一度クリックされたボタンに永続効果をつけるためのクラス「clicked」とか そして中身の内容にしか関わらないものであればdata-*が良い 商品を読み込んでDOMに書き出すスクリプトと 商品を絞り込むスクリプトが独立してあった場合 その間でやり取りするために使う商品の種類情報など ただ特にスクリプトから要素を検索しないといけない場合はそれなりのコストがかかるので、 そういうスクリプトを統合して、状態をスクリプト中に持たせたほうがスッキリする場合もある なんか見た目を変えるものはclassを思ってるかもしれないけど 属性セレクタが作られたのは、属性で見た目を変えられるようにするためだからね 属性セレクタをには必要とされる機能が追加されている 前方一致、後方一致、そしてclassのようにスペース区切りで 単語が含まれているかどうか、等がある classは名前の通り分類分けのもの 様々な要素に共通する分類を指定する際にはclass 属性はただその要素固有の性質 限られた情報の中で答えるのはそうするしかない上にありがたいが 木だけ見て森全体がわかったように断定してたのはちょっと引くわな 属性やめてjs側に持っていくべきとか意味不明だったよなw ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.1 2024/04/28 Walang Kapalit ★ | Donguri System Team 5ちゃんねる