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/ >>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の値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
> whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ >>594
自分が言いたいのはその２つのどっちが優れているかではなく、
他の有効なやり方だってあるんだし、細かな意味的なことだって重要
だからそれぞれ適材適所バランス良く使おうねということ
今回のケースにしたって情報が不足してるんだからこれが最適だとかいう回答はできないから揉めている
結果一般論的にこれまでの全ての流れを踏まえて勝手なまとめ的にそういった感想を述べたまでで
君に当て付ける気なんて微塵もないし、完全に被害妄想 >>596
無理やりとかｗ
どちらにしてもhtmlとしては個人の単なる部類に過ぎないし、文書構造からして無意味なこと
あくまで主観に過ぎない >>595
横から失礼
data-*にしてremoveClass()の部分はどうすんの？
得体のしれないclass(相当)がある場合とない場合で >>599
話を再確認しようか？
今回の話はdata-*属性を使ったら楽に実装できるという話であって
今回の話にremoveClass()が必要か？という話を先に決めないといけない
答えを言うと今回の話にremoveClass()は必要ない 今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。
今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから まあ別にremoveClassなんて簡単な処理なんだけどねｗ
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を使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねｗ ほらねｗ
だから最初に今回は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で固定を１度のみで指示
最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか
よろしくお願いします。 >>619
今回の話に関係ない
>>620
今回の話に関係ない
>>621
それ言ってるのお前だけだぞｗ
>>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-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ？ｗ
$(name).attr('class', name); これで解決
また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない >>626
> data君は、そもそもclass属性の存在自体が不要と言いたいのか？
そんなこと言ってない。今回の話では、今回の話では、（二度ｒｙ
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話 >>626
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。
だから、今回の話では、今回の話では、（二度ｒｙ
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる >>627
> つうか>>616の用途ならそれこそMap使ったほうが良くね
Mapを使うとclass属性と同じように使うことが不可能になる
class属性の代わりの案なのだから、class属性でできることが
できなくなる方法はだめ
Mapで何が不可能になるかはすでに何度も言ってるが、
CSSでスタイルを適用できなくなる >>627
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
もともとclassを使っても衝突の可能性がある。
あんたがclass属性などは衝突が有るものは全て使うなと
言いたいのなら、はっきりそう言え
class属性などは使うなとはっきりいえ
「衝突の可能性がある」は事実では有るが問題点ではない >>629
> それはただキミの想定でのお話だろ？ｗ
>>143で書いている
> 最初つけるclassは1,2個と少ないので楽かなと
最初につけるクラスは1個の場合もあるし、2個の場合もある
そして問題が解決したわけではなく、楽と書いていることからもわかるように
これもいやだけど少ないのでまだ楽だろうという話 >>629
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーｗｗｗｗ
class="aaa bbb" の bbbの内容をcssで書き換えて
今度はbbbを消す代わりに、cssをもとに戻すのかよｗｗｗ
思いつきで語るな >>635
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上 > $('.aaa').removeClass().addClass('aaa');
$('.aaa').attr('class', 'aaa'); // 最小限に明確な意図する結果にする
これが最良 >>636
> 無意味な値のないカスタム属性をくっつけているよりスマートだし、
だから理由かけや
説得力皆無だ >636
> この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む
bbb, ccc, ddd のどこが視覚的な意味合い？ >>636
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが？ｗ
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かって話してたのかｗ >>645
初学者なのでeachでゴリゴリ回す発想しかありませんでしたが
そのような書き方が出来るのですね
参考になります
ありがとうございます アロー関数を使えばもっと減らせる
と書きつつあえて使わないのはなんなの？
そっちのほうが分かりやすいと思ってんの？ <要素 class="bbb eee fff jjj">と、
要素に値（class）を持たせ、値は動的に変化します
この要素は今どの値を持っているかはclassNameで簡単に取得できますが
classを使わずdata-*で持たせた場合はどう取得するのでしょうか？
アロー関数無しでお願いします >>656
穿った見方をすれば、これまでの話の対抗策として書いた感じがするが、
要件が違うから、"今回の場合"は classを使ったほうが良いよと
"この間の例"では、data-*属性を勧めていた俺が答えるｗ いやいや、『この間の例』は要件や目的がはっきりしてないんだから
結局何が最適かは分かりませんと言うことがFAでしょ
だからこういう場合には、とか一般的にはとか話が広がってたのに
その中で大口叩いておいて細かいことに逃げるのは感心しないな
いくら屁理屈こねようとも、周りの人へ感覚的にどう思わせたかってことが大事だからね >>659は自分の書いた内容を自分で見たほうが良い。
おまえはその書いた内容の話をしたいのかと >>659
>結局何が最適かは分かりませんと言うことがFAでしょ
>だからこういう場合には
この辺りはもっともだし、よくわかるが後半よくわからん DOM に状態を持たせるな！
DOM に状態を問い合わせるな！
React を使え！ 状態が要素の外側の見た目振る舞いに関わるものならclassで良い
例えば一度クリックされたボタンに永続効果をつけるためのクラス「clicked」とか
そして中身の内容にしか関わらないものであればdata-*が良い
商品を読み込んでDOMに書き出すスクリプトと
商品を絞り込むスクリプトが独立してあった場合
その間でやり取りするために使う商品の種類情報など
ただ特にスクリプトから要素を検索しないといけない場合はそれなりのコストがかかるので、
そういうスクリプトを統合して、状態をスクリプト中に持たせたほうがスッキリする場合もある なんか見た目を変えるものはclassを思ってるかもしれないけど
属性セレクタが作られたのは、属性で見た目を変えられるようにするためだからね
属性セレクタをには必要とされる機能が追加されている
前方一致、後方一致、そしてclassのようにスペース区切りで
単語が含まれているかどうか、等がある classは名前の通り分類分けのもの
様々な要素に共通する分類を指定する際にはclass
属性はただその要素固有の性質 限られた情報の中で答えるのはそうするしかない上にありがたいが
木だけ見て森全体がわかったように断定してたのはちょっと引くわな 属性やめてjs側に持っていくべきとか意味不明だったよなｗ いや、実際Mapは有用だと思う
>>665の真ん中の例だと
最初から商品情報がHTMLとして存在している場合は
DOMに書き加えるという機能とDOMの情報を編集するという機能に分割するほうが良さげだが
そうでない場合はDOMはただのViewと捉えてModelはJS側で持っておくほうが良さげ 誰がどう読んでもdata君のことなのに無理やりmap君とか見苦しいったら dataでも、classでもHTMLとしては意味はないが、
data属性を使う場合はdataメソッドの取り扱いには注意が必要
動的に追加、削除、変更する場合に
$(Elements).data('hoge') で値を参照するとキャッシュされるで動的変更の値は参照できない
$(Elements).attr('data-hoge') では問題はないけどね
あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明 >>676
それ以前に、dataメソッドでは
data属性を変えることはできないよ
data属性を変える必要が無いなら、dateメソッドで十分だし
書き換える必要があるなら、attrメソッドを使えと言うだけの話
> あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明
その結論はおかしい。なぜならdata属性の読み書きにはattrメソッドを使う
その場合注意する点は何もないわけで、もっというのならDOM APIを使うならば
dataメソッドがdata属性を書き換えるものではないなどという混乱はおきない
つまり、あんたのレスの最後の行はその行以前の話とは全く関係なく
取ってつけたように出てきてる。
カスタム属性を使うかの基準は動的かどうかではなくclassという名前の
属性に入れるのがふさわしいか、別の名前の属性に入れたほうが良いかの違いでしょ？
例えばariaのrole属性だって、classにaria-role-button なんて名前で入れることだって
できただろうけど、そんなことせずにrole属性を作りましょうとなったわけだ
classとは違った別の目的が有るのならclassを使わずに、カスタム属性を使いましょう
そのために汎用にいくつでも自由に属性を作って良いことになったわけなんだから jQueryにもdatasetメソッドを作れば良いのかも あ、DOM APIのDataset APIは読み取り専用だったｗ 嫌いなやつを追い出すには、徹底的に反論して論破するのと
無視するのと煽るのどれが一番効果的だろうか？ >>682
楽しいのは煽りだね どんどん無知さらして笑われてるのに本人は気付かないからな
徹底的に反論はアホには反論自体が理解できないから意味ない
追い出したいだけなら無視が一番だけど 聞いたかい？俺がdata君なわけだけど、本当に荒らしを
しているのは誰かよくわかっただろ？ >>675
WeakMapくんは俺だが自演なんかしてないよ >>674
意味分かってないな
>>685
俺は承知 何も意見を言わずに支持を表明する理由は、
ほら支持してる人がいるだろ？と見せるのが目的だって死んだじいちゃんが言ってた。
名前を隠して言うことで沢山の人に支持されてるように見せられるんだって >>687
それ煽りだけ入れる人、意見を言わずに否定だけする人も同じだよ >>687
匿名掲示板でそんなこと言ってもだから何としか
ちなみに674は明らかに言わんとしてることに対してずれてるぞ ■ このスレッドは過去ログ倉庫に格納されています
