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/ でそのdata-*やら属性やらが「classよりいい」と関係してるのかね？
toggleClassや他のclassの削除はスルーなんかな それはJSONを使ってオブジェクトを文字列にすればって意味なので
属性にオブジェクトを入れてることにはならない
加えてJSON文字列に文字列化（シリアライズ）できないものや
情報が失われてしまうものがオブジェクトに
含まれている場合にもやっぱり対応できない
例えば関数とか日付型とかDOM要素とか。
JSONを拡張して頑張れば、少しはましになるかもしれないけど
DOM要素のシリアライズとかまず無理だろうね >>272
> でそのdata-*やら属性やらが「classよりいい」と関係してるのかね？
誤解されるような書き方をするな。わざとか？
> toggleClassや他のclassの削除はスルーなんかな
すでに回答済みだったはずだが？
もう一回書いてやると、
<span class="button color-white size-M">
みたいな書き方をしていて、colorは全12色みたいにもっと色があって
sizeにもS, M, L, LL みたいに複数サイズがあったとする
これをclassを操作して
<span class="button color-red size-l">
のように変えるのは大変。コード側に全ての色を定義して一旦全部
removeClassするか、全てのクラス値を列挙してプリフィックスで見分けるようなコードが必要になる
そういう使い方の場合、data-*属性のほうが、classを使うより良いという話
<span class="button" data-color="white" data-size="M"> を
<span class="button" data-color="red" data-size="L"> に書き換えるならば
$(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり
こういう話が先にあって、その流れでdata-*やら属性やらが「classよりいい」と言ってる propっていう関数もなかったっけ？
あれはどういうときに使うべき？
使い分けの方針を教えてください。 >少しは頭使ったら？
>priceをpliceと書き間違えるようなやつじゃ無理かｗ
こういう余計なこと書かなきゃいいのに
それで嫌われてるんだろうな
あ、自分で部下に頼れると自慢してた人かな？ｗ >>261
$('#hoge').attr({'data-price': '100', 'data-size': 'L'});
alert($('#hoge').attr('data-price'));
「1つの属性に」オブジェクトを入れられないということでいいですよね
>>265
入れられないというか同時設定できるだけということでいいですよね
http://semooh.jp/jquery/api/attributes/attr/properties/ >>278
> 「1つの属性に」オブジェクトを入れられないということでいいですよね
最初からそう言ってる。属性は文字列しか受け付けられないから
オブジェクトを入れようとしても文字列化される
data()メソッドはもともと要素に紐付いたデータを保存するための仕組みで
オブジェクト等自由に入れることができる。
data()メソッドはdata-*属性と無関係・・・と言いたいところだが
data()メソッドの初期値として利用される。だけどそれだけ。
基本的にはdata()メソッドはdata-*属性を読み書きするものじゃない
> 入れられないというか同時設定できるだけということでいいですよね
複数の属性に同時設定できるという機能を、属性にオブジェクトを代入できると
勘違いしてしまったかわいそうな人がいるという話。
何も言うが属性にはオブジェクト入れられない。入れられるのは文字列だけ。
だからattr()メソッドを使って複数の属性に値を入れようとしても、
入れられるのは文字列だけ。値がオブジェクトだと当然設定することはできない。
つまり
$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
みたいに、属性の値がオブジェクトになっていれば当然入れることはできない なるほど、attrで設定できるのは文字列だけってことだな >>262
<el data-*= 'value'>
$(el).data('value')
この値の扱いの違い例えてを言ってやって上げてるのに
おまえのオツムでは理解できないみたいだね <el data-*= 'value'> ってなんだ？
まさか * がいろんな文字を意味するってことすら
分かってないのか？ ちょっとかわいそうなんで>>281に教えてあげると
$(el).data('value') で（あくまで初期値としてだが）
読み取るのはdata-value属性
data-*属性ではない。
data-valueという属性の名前になるんだよ >>279
>>259=>>278ですがどうも
それまでの他の書き込みに惑わされました
pliceは指摘ありがと（きついけど） 結論としては、attrメソッドは属性に文字列を設定するものだから
当然オブジェクト入れられない、入れようとしても文字列化されるので
実質意味がない。
それに対してdataメソッドは内部的に要素に関連したデータを
持たせる物。だから文字列以外のオブジェクトをもたせることができる
同じdataで惑わされているようだが、attr(data-*)とdata(*)は
本質的には別物 pliceといえばspliceとsliceでいつも混乱します。どうやって覚えたらいいですか？そもそもスライスは分かるけどspliceってどういう意味ですか？
APIにマイナーな英単語使うなや糞メリケンファック >>288
わかってるお前が解説しろ
本当に分かってないのはお前だろうからさ >>286
>>279の
>$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
>みたいに、属性の値がオブジェクトになっていれば当然入れることはできない
は（私は最初から）ｏｋですが、とすると
>>208の
>例えば、class="black white red yellow"
なんてことはせず、するなら例えば
class="black m cotton"
である場合、208のグループ化にメリットありますか？ >>291
自分で調べてなかったの？
attrはHTMLの属性を読み書きするもの
propはHTMLの属性ではなくDOMのプロパティを読み書きするもの
DOMのプロパティを読み書きした結果、属性に反映されるかも知れないが
それはブラウザが勝手にやっていること
なので例えばchecked属性が空の時でも、attrで読み取るとundefiendであるが
DOMプロパティ的にはfalseなのでpropを使うとfalseになる
参照先がHTMLの属性かDOMのプロパティかの違いだよ
その点でattr()メソッドとcss()メソッドの関係と似ているね。 >>290
> なんてことはせず、するなら例えば
> class="black m cotton"
> である場合、
どういう意味？ まず日本語 >>293
>>189のような場合は別として各classがかぶらない
blackはredやgreenになり、mはlやsになり
blackはmがあろうがなかろうが何の値だろうが関係なく、mもしかり
という場合です >>294
> blackはredやgreenになり
それをclassで実現するの大変なんだわ
だって、"hoge black" とかあって、
この内blackだけをredにするわけだろ？
この時、blackとred以外にどんな色があるかは不明とする。
またhogeはhoge以外にもどんなものが来るかは不明とする
この場合に、blackをredにする方法、どういうのがある？ >>296
私ではありませんが>>153や>>140とか
でも前者はmyTagsをいじるのかえって大変ですね >>297
そういうこと。それに比べてdata-*属性を使えば
単純な一メソッド呼び出しで完結してしまう それが合理的な方法であることは分かったけど>>140には「.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく」って書いてあるから質問に対する答えになってなくね？
結局>>140に対する回答はどうなるの？ >>299
回答なら書いてあるじゃん
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個と少ないので楽かなと 直接的には書いてないけど、つまり>>140の質問に対する答えは「なし」ってことね。 >>298
でグループ化とは？
>>299
静的に付けたclassが消えるのはいいとしてhasClassどうすんだ？ってなかったっけ？ >>302
> でグループ化とは？
>>208に書いてあるよ
> 値をグループ化できる。複数の値を週類ごとにまとめたものがグループ
> classの場合は値を書くしかないから3つのグループがあって、一つのグループごとに
> 5個の値があれば、最大15個の値を管理する必要が出てくる
> data-*を使えば3つでいい（今は数が多くて管理が大変という話だというのを思い出そう）
> グループと値として管理できるのがメリット >>302
> 静的に付けたclassが消えるのはいいとしてhasClassどうすんだ？ってなかったっけ？
hasClassって、この場合、blackか？redか？greenか？・・・・その他色々な色か？って
ループでぐるぐる回していま何色か調べるってこと？
そりゃ大変そうだな。 data-*属性をCSSのクラスリストのように使う方法
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
> [attr~=value]
> attr という名前の属性の値が空白区切りの語のリストで、その中の1つが正確に value と一致する要素を表します。
↑属性セレクタとしてこれがあるからできるんじゃないかと思ってみたら、
やっぱりできるもんだなぁ。data-*属性でhasClass相当ってこれでいいでしょ？
https://jsfiddle.net/s9epbv2k/
-------- html
<ul>
<li data-test="foo bar">1</li>
<li data-test="foo bar baz">2</li>
<li data-test="foo baz bar">3</li>
<li data-test="baz foo bar">4</li>
</ul>
-------- css
[data-test~="baz"] {
color: red;
}
-------- js
$('[data-test~="baz"]').on('click', function() {
alert($(this).text())
})
$('li').on('click', function() {
alert($(this).is('[data-test~="baz"]'));
}) >>269
var hash = {price: 100, size: "L"};
$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}
ほう、price が数値型か。
ためになった 立ち返っていうとですね
data属性を使わなくてもidとclassでどうにでもなることだとなんだけどねｗ >>304
全て調べるとは限らないぞ
greenが含まれているか否か、それだけの場合もある >>305
孫以下はどうするよ？has使うか？回りくどいな >>309
今はhasClassとの違いだったよね？
まずhasClassはこう書けるというのを示してくんない？
hasClassで孫以下はどうするのよ？
それにしても $(this).is('[data-test~="baz"]') は最強だな
セレクタ使うから、$(this).is('span [data-test~="baz"]')
みたいなことまでできるのが容易に思いつく
hasClassで孫以下はどうするのよ？ セレクタよりなるべくメソッド使いたいもんだな
toggleClassはできそうだが問題は他のライブラリがつけたクラスだな
無視するかはその人次第なのでそうしろとか有り得んわ > セレクタよりなるべくメソッド使いたいもんだな
お前の好みなんかどうでもいい > 無視するかはその人次第なのでそうしろとか有り得んわ
無視するかはその人次第なので、
そうしろとか有り得んわ
なんて、お前が決めることではない そうだな、data-かclassかはお前が決めることではない 単にこの問題に対してdata-*の方が優れているという
ことを論理的に説明しただけ。
これは決まっている事実を公表しただけ
俺が決めたわけじゃない 詳細がわからない以上どっちもどっちだろ
どちらが優れていると確定できるわけがない
上で同じようなこと書いてる人がいたが各々好きにすればいいだけ >>316
話がごっちゃになってるぞ
最終的に選ぶのが聞いた人であって、
今回の話にdata-*が有利なのは単なる事実だ もともとclassでやると・・・の管理が面倒って話だからな
最初っからclassでは大変だっていう自覚はあったわけだ
それをどう解決すべきかがわからずclassで頑張ろうとしていただけで
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと data-でもそれはそれで面倒な点があるかもしれんだろうに
解決策は最初からほぼわかってた
ただ確信が持てないので聞いただけだろ
＞とするのはあり? かも知れないなら、まず最初に質問者に聞くべきだな
自分の想像で、問題あるという前提で話をするのはやめろ 仕様がこれ以上変わらないなら答えは「あり」
業務アプリ作ってんじゃねーんだぞアホらしい > 140
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
$('.aaa').removeClass().addClass('aaa');
> とするのはあり?
> 142
> >>140
> それだと静的に付けたclassまで消えちゃうじゃん
> 143
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと
この一連の流れから明らかだな。
静的に付けたclassまで消えるのが問題だと認識してる。 >>321
> 仕様がこれ以上変わらないなら答えは「あり」
何言ってんだ？
removeClassが消えるのは嫌だけど・・・が面倒だって話だろ
ならもっといい方法がないか探してるってことだよ はっきりさせておこう。
この例では、classを使うよりdata-*属性を使ったほうが良い
ここまではみんなOKだよな ということは、あとはclassを使うか、data-*を使うかは
質問者が選ぶことだ。
回答者としては、質問者へ回答を書くのみ
classを使った案とdata-*を使った優れた案がでた
この段階でclassを押し付けるのはおかしい 質問者の >>140 と >>142 から
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
ということにたいして
> $('.aaa').removeClass().addClass('aaa');
という回答は
静的に付けたclassが消えるという問題があると
質問者と回答の双方が認識しているわけだ
問題があると認識してる時点で
この質問は「なしだけどしかたないのかなぁ」という話に変わったわけだ もし静的に付けたclassが消えてもいいというのなら
>>143は「静的に付けたclassが消えても問題ないです」とい
レスになっていただろう。
だが>143は、消えちゃうんだけど（それを避けようとすると）・・・の管理が面倒になる
という話をしているわけだ。
この流れで、もっと良い案、data-*属性を使ったやり方が出るのは当然だろう >>323
>removeClassが消えるのは嫌
捏造しないように
むしろいいかもしれんぞ 捏造も何もちゃんと書いてあるじゃん
> 142
> >>140
> それだと静的に付けたclassまで消えちゃうじゃん
> 143
> >>142
> そうなんだけど・・・の管理が面倒で みなさんいろいろすみません>>140です
こういうの書くと成りすましに見られるから控えていたのですが
>>328
静的に付けたclassは消えても問題ないです
ただのセレクタ役だし、またつければいいだけで >>331
> ただのセレクタ役だし、またつければいいだけで
ただのセレクタ役とは？
またつければいいというのは、どうやって？ >>332
こういうのがいるから後から書きづらくなるんだよな
スレに悪影響以外何者でもない
>>334
出てるじゃん >>330
嫌と書いてないのを君が証明してどうするよｗ >>326
押し付けてるアンカよろ
どっちでもいいは幾つかあるが >>335
でてるじゃんじゃなくて、
どこにでてるのかって話だ
>>334
で、ただのセレクタ役とは？
またつければいいというのは、どうやって？ どっちを使えとか押し付けてはいないな。
ただこの場合はdata-*属性を使ったほうが
シンプルに実装できるってだけの話だ 確かにいままで出た条件の範囲では
data-*属性のほうが良いかもしれないけど
もしかしたら、明らかになってない条件の中に
data-*属性じゃだめな理由があるかもしれないだろ！
お願いだ。それを誰か書いてくれ
このままじゃ負ける なりすましするなら最後まで本人になりきって
質問に答えなきゃだめだろｗ
中途半端なことをするから余計怪しまれる >>140
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?
'.aaa'というセレクタで指定していることから静的に
追加したclassを変更する意図とケースは無いと見られる
後から追加されたclassNameは必ず後に追加されるので
>>144で答えは出ていると思うけどね >>344
条件次第だけどそうだと思うけどね？
jQueryでも古いバージョンにはセレクタのプロパティーがあったんだよね
最近のバージョンではなくなっているけど
$('.aaa').selector // '.aaa'
これを活用してインスタンスメソッドを作成しておくってこともできたんだけど 何こいつ問題あるかないかにこだわってるんだろう
しかも質問者じゃない人のレスで満足して。
誰かに問題ありませんって言ってほしいだけかよｗ
承認欲求ってやつだな >>343
> '.aaa'というセレクタで指定していることから静的に
> 追加したclassを変更する意図とケースは無いと見られる
静的に追加したclassっていうのを誤解してるんじゃね？
JavaScriptで追加したものじゃなくて、HTMLに書かれた
classって意味だよ。デザインの都合で。
JavaScriptの役目としては、コードで付けたもの以外は
そのまま残しておく。だからremoveClassで全部消えちゃうのは
まずいわけ >>345
> これを活用してインスタンスメソッドを作成しておくってこともできたんだけど
こっちはまったく意味不明。何がしたいのかさっぱりわからない。 >>347
>>144だと全部消えないだろ？
あくまで静的なclassNameは'aaa'での条件
質問の条件に対してことだよ
自己解釈しているのはアンタの方だろ？ｗ
>>348
これは以前のjQueryにおいてのこと >>349
だから.aaa以外の静的に付けたものは消えるじゃん
それにそのコードだとaaaが2番目以降に来ると問題が有るし > 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、1個とは限らないしね >>349
> これは以前のjQueryにおいてのこと
だから以前のjQueryだからって何なんだって話だ
jQuery 1.9.1で実行してみたが、
このように.aaaしか取れない
それで何がしたいのか
<span class="btn aaa">span</span>
alert($('.aaa').selector); // .aaa >>350
>>140にはそんなことは書いていないだろ？ｗ
最後に.addClass('aaa')で完結している >>352
セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド >>353
>>143に書いてあるだろ
勝手に完結させんな
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと >>354
> セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド
だから、<span class="btn aaa">span</span>
aaaを参照して静的に書かれたbtnまで削除してしまう
使えないメソッドですねって言ってんだよｗ そもそもselectorを使うってセンス悪いわ
セレクタがIDだったらどうするんだ？
セレクタが属性セレクタだったらどうするだ？
カンマで区切られた複数のセレクタだったら、
親子セレクタ、隣接セレクタだったら？
セレクタがクラスの場合に限り、セレクタに
一致するものを除いて削除するメソッドとか
設計的に気持ち悪い。selectorなくして正解だったな >>357
お前らって本当に頭悪いよな余計なことを妄想しすぎ
>>140の回答はだな
$('.aaa').attr('class', 'aaa');
これで良いんだよ
バカ >>356
> $('.aaa').removeClass().addClass('aaa');
この結果から他にclassが存在しないだろ
バカ >>140で話終わってないだろ
143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと > 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、最初につけるclassは.aaaだけとは
限らないことが判明している。
つまり本当はこう言っているわけだ
$('.aaa').removeClass('bbb ccc ddd・・・');
を
$('.aaa').removeClass().addClass('aaa ・・・');
後者のほうが数が少なくてまだマシということだが、
両方ともやりたくないのは>>143からわかるだろう
（だからこそ>>140しか見ないようにしてるのだろうが）
この２つの・・・の管理をしなくて済むのが
data-*属性を使ったやり方なわけだよ >>358
それだと.aaaにデザインの都合で新たなクラスを
追加した時に、そのクラスまで消えてしまいますよね
それを避けるにはどうしたら良いのでしょうか？
なおデザイン側で追加されるクラスはわからないものとします >>362
あくまでも>>140の質問に対して率直に回答
結果としては < (elment) class="aaa" ...> にしたいということでしかない
それは質問に対しての回答ではなく、与太話でしかない
完結でしょ？ >>361
$('.aaa').removeClass().addClass('aaa'); と $('.aaa').removeClass().addClass('aaa ・・・');
でｈは全く結果が違うし、解釈も違うことが理解できないみたいだねｗ >>363
ここは質問スレです。私の質問に答えてください >>364
> 最初つけるclassは1,2個と少ないので楽かなと
「最初つけるclassは1,2個」の意味を考えましょう
$('.aaa').removeClass().addClass('aaa');
最初につけるclassが2個だとして、これのどこにそれが書いてありますか？ >>366
$('.aaa').removeClass().addClass('aaa');
↑
これのどこに最初のclassの数云々考える必要があるの？
結果は class="aaa" しかあり得ないだろｗ
>>361がclassが複数あるとか質問に沿わない自己解釈しているから言ってるだけ
なんで必死に絡んでくるのか意味不明 $().addClass('aaa'); とかしたら
jQueryが「classNameはaaa以外にありませんか？」とか一々聞いてくるのかよｗ 「最初つけるclassは1,2個」の意味を考えましょう 質問を見れば最後は"aaa"のみで完結してるじゃん
これ以上でも以下でもないと思うが外野の勝手な連想で
ただ意味をこじ付けているだけにしか見えない
学校で先生に問題はよく読みなさいと教わらなかったのかな？ >>140
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり? ■ このスレッドは過去ログ倉庫に格納されています
