X
jQuery 質問スレッド vol.8
レス数が1000を超えています。これ以上書き込みはできません。
0333Name_Not_Found
垢版 |
2018/02/12(月) 23:55:07.69ID:???
顧客が本当に必要だったものワロタｗｗｗｗｗ
0334Name_Not_Found
垢版 |
2018/02/12(月) 23:55:28.16ID:???
>>331
> ただのセレクタ役だし、またつければいいだけで

ただのセレクタ役とは？
またつければいいというのは、どうやって？
0335Name_Not_Found
垢版 |
2018/02/13(火) 00:12:21.11ID:???
>>332
こういうのがいるから後から書きづらくなるんだよな
スレに悪影響以外何者でもない

>>334
出てるじゃん
0336Name_Not_Found
垢版 |
2018/02/13(火) 00:14:07.80ID:???
>>330
嫌と書いてないのを君が証明してどうするよｗ
0337Name_Not_Found
垢版 |
2018/02/13(火) 00:18:58.36ID:???
>>326
押し付けてるアンカよろ
どっちでもいいは幾つかあるが
0338Name_Not_Found
垢版 |
2018/02/13(火) 00:21:37.55ID:???
>>335
でてるじゃんじゃなくて、
どこにでてるのかって話だ

>>334
で、ただのセレクタ役とは？
またつければいいというのは、どうやって？
0339Name_Not_Found
垢版 |
2018/02/13(火) 00:22:33.11ID:???
どっちを使えとか押し付けてはいないな。
ただこの場合はdata-*属性を使ったほうが
シンプルに実装できるってだけの話だ
0340Name_Not_Found
垢版 |
2018/02/13(火) 00:25:02.39ID:???
確かにいままで出た条件の範囲では
data-*属性のほうが良いかもしれないけど

もしかしたら、明らかになってない条件の中に
data-*属性じゃだめな理由があるかもしれないだろ！
お願いだ。それを誰か書いてくれ
このままじゃ負ける
0342Name_Not_Found
垢版 |
2018/02/13(火) 00:49:54.45ID:???
なりすましするなら最後まで本人になりきって
質問に答えなきゃだめだろｗ
中途半端なことをするから余計怪しまれる
0343Name_Not_Found
垢版 |
2018/02/13(火) 09:14:17.29ID:???
>>140
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?
'.aaa'というセレクタで指定していることから静的に
追加したclassを変更する意図とケースは無いと見られる
後から追加されたclassNameは必ず後に追加されるので
>>144で答えは出ていると思うけどね
0344Name_Not_Found
垢版 |
2018/02/13(火) 09:15:27.85ID:???
>>343
つまり問題ないってことか
ありがとう
0345Name_Not_Found
垢版 |
2018/02/13(火) 09:46:47.03ID:???
>>344
条件次第だけどそうだと思うけどね？
jQueryでも古いバージョンにはセレクタのプロパティーがあったんだよね
最近のバージョンではなくなっているけど
$('.aaa').selector // '.aaa'
これを活用してインスタンスメソッドを作成しておくってこともできたんだけど
0346Name_Not_Found
垢版 |
2018/02/13(火) 09:47:52.64ID:???
何こいつ問題あるかないかにこだわってるんだろう
しかも質問者じゃない人のレスで満足して。
誰かに問題ありませんって言ってほしいだけかよｗ
承認欲求ってやつだな
0347Name_Not_Found
垢版 |
2018/02/13(火) 09:51:14.33ID:???
>>343
> '.aaa'というセレクタで指定していることから静的に
> 追加したclassを変更する意図とケースは無いと見られる

静的に追加したclassっていうのを誤解してるんじゃね？
JavaScriptで追加したものじゃなくて、HTMLに書かれた
classって意味だよ。デザインの都合で。

JavaScriptの役目としては、コードで付けたもの以外は
そのまま残しておく。だからremoveClassで全部消えちゃうのは
まずいわけ
0348Name_Not_Found
垢版 |
2018/02/13(火) 09:52:25.13ID:???
>>345
> これを活用してインスタンスメソッドを作成しておくってこともできたんだけど

こっちはまったく意味不明。何がしたいのかさっぱりわからない。
0349Name_Not_Found
垢版 |
2018/02/13(火) 10:11:01.08ID:???
>>347
>>144だと全部消えないだろ？
あくまで静的なclassNameは'aaa'での条件
質問の条件に対してことだよ
自己解釈しているのはアンタの方だろ？ｗ
>>348
これは以前のjQueryにおいてのこと
0350Name_Not_Found
垢版 |
2018/02/13(火) 10:57:12.25ID:???
>>349
だから.aaa以外の静的に付けたものは消えるじゃん
それにそのコードだとaaaが2番目以降に来ると問題が有るし
0351Name_Not_Found
垢版 |
2018/02/13(火) 10:59:09.70ID:???
> 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、1個とは限らないしね
0352Name_Not_Found
垢版 |
2018/02/13(火) 11:03:00.53ID:???
>>349
> これは以前のjQueryにおいてのこと

だから以前のjQueryだからって何なんだって話だ
jQuery 1.9.1で実行してみたが、
このように.aaaしか取れない
それで何がしたいのか

<span class="btn aaa">span</span>

alert($('.aaa').selector); // .aaa
0353Name_Not_Found
垢版 |
2018/02/13(火) 11:07:34.57ID:???
>>350
>>140にはそんなことは書いていないだろ？ｗ
最後に.addClass('aaa')で完結している
0354Name_Not_Found
垢版 |
2018/02/13(火) 11:11:53.19ID:???
>>352
セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド
0355Name_Not_Found
垢版 |
2018/02/13(火) 11:13:29.09ID:???
>>353

>>143に書いてあるだろ
勝手に完結させんな

143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと
0356Name_Not_Found
垢版 |
2018/02/13(火) 11:15:01.17ID:???
>>354
> セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド

だから、<span class="btn aaa">span</span>
aaaを参照して静的に書かれたbtnまで削除してしまう
使えないメソッドですねって言ってんだよｗ
0357Name_Not_Found
垢版 |
2018/02/13(火) 11:29:04.63ID:???
そもそもselectorを使うってセンス悪いわ

セレクタがIDだったらどうするんだ？
セレクタが属性セレクタだったらどうするだ？
カンマで区切られた複数のセレクタだったら、
親子セレクタ、隣接セレクタだったら？

セレクタがクラスの場合に限り、セレクタに
一致するものを除いて削除するメソッドとか
設計的に気持ち悪い。selectorなくして正解だったな
0358Name_Not_Found
垢版 |
2018/02/13(火) 11:54:15.83ID:???
>>357
お前らって本当に頭悪いよな余計なことを妄想しすぎ
>>140の回答はだな

$('.aaa').attr('class', 'aaa');

これで良いんだよ
バカ
0359Name_Not_Found
垢版 |
2018/02/13(火) 11:56:11.30ID:???
>>356
> $('.aaa').removeClass().addClass('aaa');
この結果から他にclassが存在しないだろ
バカ
0360Name_Not_Found
垢版 |
2018/02/13(火) 12:35:43.21ID:???
>>140で話終わってないだろ

143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと
0361Name_Not_Found
垢版 |
2018/02/13(火) 13:09:00.19ID:???
> 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、最初につけるclassは.aaaだけとは
限らないことが判明している。

つまり本当はこう言っているわけだ

$('.aaa').removeClass('bbb ccc ddd・・・');
を
$('.aaa').removeClass().addClass('aaa ・・・');


後者のほうが数が少なくてまだマシということだが、
両方ともやりたくないのは>>143からわかるだろう
（だからこそ>>140しか見ないようにしてるのだろうが）

この２つの・・・の管理をしなくて済むのが
data-*属性を使ったやり方なわけだよ
0362Name_Not_Found
垢版 |
2018/02/13(火) 14:18:20.70ID:???
>>358
それだと.aaaにデザインの都合で新たなクラスを
追加した時に、そのクラスまで消えてしまいますよね
それを避けるにはどうしたら良いのでしょうか？
なおデザイン側で追加されるクラスはわからないものとします
0363Name_Not_Found
垢版 |
2018/02/13(火) 16:13:02.54ID:???
>>362
あくまでも>>140の質問に対して率直に回答
結果としては < (elment) class="aaa" ...> にしたいということでしかない
それは質問に対しての回答ではなく、与太話でしかない
完結でしょ？
0364Name_Not_Found
垢版 |
2018/02/13(火) 16:20:22.09ID:???
>>361
$('.aaa').removeClass().addClass('aaa'); と $('.aaa').removeClass().addClass('aaa ・・・');
でｈは全く結果が違うし、解釈も違うことが理解できないみたいだねｗ
0365Name_Not_Found
垢版 |
2018/02/13(火) 16:37:46.03ID:???
>>363
ここは質問スレです。私の質問に答えてください
0366Name_Not_Found
垢版 |
2018/02/13(火) 17:08:53.66ID:???
>>364
> 最初つけるclassは1,2個と少ないので楽かなと

「最初つけるclassは1,2個」の意味を考えましょう

$('.aaa').removeClass().addClass('aaa');
最初につけるclassが2個だとして、これのどこにそれが書いてありますか？
0367Name_Not_Found
垢版 |
2018/02/13(火) 18:36:38.06ID:???
>>366
$('.aaa').removeClass().addClass('aaa');
　　　　　　　↑
これのどこに最初のclassの数云々考える必要があるの？
結果は class="aaa" しかあり得ないだろｗ
>>361がclassが複数あるとか質問に沿わない自己解釈しているから言ってるだけ
なんで必死に絡んでくるのか意味不明
0368Name_Not_Found
垢版 |
2018/02/13(火) 18:40:19.22ID:???
$().addClass('aaa'); とかしたら
jQueryが「classNameはaaa以外にありませんか？」とか一々聞いてくるのかよｗ
0369Name_Not_Found
垢版 |
2018/02/13(火) 18:50:09.93ID:???
「最初つけるclassは1,2個」の意味を考えましょう
0370Name_Not_Found
垢版 |
2018/02/13(火) 19:25:41.84ID:???
質問を見れば最後は"aaa"のみで完結してるじゃん
これ以上でも以下でもないと思うが外野の勝手な連想で
ただ意味をこじ付けているだけにしか見えない
学校で先生に問題はよく読みなさいと教わらなかったのかな？
0371Name_Not_Found
垢版 |
2018/02/13(火) 19:30:38.52ID:???
>>140
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?
0372Name_Not_Found
垢版 |
2018/02/13(火) 20:18:34.50ID:???
>>361
両方ともやりたくないとは言ってないよ

やりたいことは
$('.aaa').removeClass().addClass('aaa');　または
$('.aaa').removeClass().addClass('aaa bbb');

つまりccc ddd・・・を消したいと
0373Name_Not_Found
垢版 |
2018/02/13(火) 20:31:16.92ID:???
>>332
そういうの荒れるからやめてくれ、マジで
ここ参考になるのに
0374Name_Not_Found
垢版 |
2018/02/13(火) 21:13:39.59ID:Y812Cm0N
もーめんどくせーから
$(function () {
$(".aaa").each(function () {
$(this).data("originalClass", $(this).attr("class"));
});
}
して、必要に応じて
$(".aaa").each(function () {
$(this).attr("class", $(this).data("originalClass"));
});
するとかｗ
0375Name_Not_Found
垢版 |
2018/02/13(火) 21:45:46.50ID:???
>>372
$('.aaa').attr('class', 'aaa');　または
$('.aaa').attr('class', 'aaa bbb');
いわゆる初期化だろｗ
0376Name_Not_Found
垢版 |
2018/02/13(火) 21:49:29.59ID:???
>>372
> やりたいことは
> $('.aaa').removeClass().addClass('aaa');　または
> $('.aaa').removeClass().addClass('aaa bbb');
>
> つまりccc ddd・・・を消したいと

$('.aaa').text('').text('aaa bbb');
こんなことやりたいの？
0377Name_Not_Found
垢版 |
2018/02/13(火) 23:19:16.08ID:???
>>370
ほんとそう思う
自分目線でこうあるべきと勝手に進めてるのが一部
0378Name_Not_Found
垢版 |
2018/02/13(火) 23:37:29.22ID:???
>370
> 質問を見れば最後は"aaa"のみで完結してるじゃん
あんたの言う最後は>>140のことかな？

>>143でこう言ってるのは無視してるのかな？

> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと
0383Name_Not_Found
垢版 |
2018/02/14(水) 08:27:10.60ID:???
$('.aaa').attr('class', 'aaa');
　or
$('.aaa').attr('class', 'aaa bbb');

これが理にかなってると思う
0384Name_Not_Found
垢版 |
2018/02/14(水) 09:15:17.52ID:???
>>383
ただそれだとデザインの都合で
別のクラスが追加された時に
メンテナンスが必要になるんですよね
どうにかなりませんか？
0385Name_Not_Found
垢版 |
2018/02/14(水) 12:22:19.19ID:???
>>384
> $('.aaa').removeClass().addClass('aaa');　または
> $('.aaa').removeClass().addClass('aaa bbb');

これをやるなら>>383の方がスマートで理論的と俺は見た
理由は最終的には'aaa'(単一)か'aaa bbb'(複数)のクラス名に意図的に置き換えるから
基本に数値にしても結果がわかっているなら　num = 10　で良い、無理に nam = x + y などは不要
これはどんな言語でも同じこと
0386Name_Not_Found
垢版 |
2018/02/14(水) 12:28:37.87ID:???
>>385
デザインの都合でっていう話は完全無視？

<span class="aaa"> とあって、
デザイナーが この部分フォント大きくしたいなとか思って
<span class="aaa hoge"> みたいに変更すると
JavaScriptのコードの変更まで必要になってしまうんだよ

他にもclassってことは複数のaaaがあることが想定されるが
一つは <span class="aaa hoge"> 、もう一つは <span class="aaa hage">
だったりしたら、困るだろ

HTMLはプログラマとデザイナで共有している所だから
お互いに相手に影響を与えないようにしないといけない
0387Name_Not_Found
垢版 |
2018/02/14(水) 12:49:45.12ID:???
>>386
お互いに相手に影響を与えないようにしないといけないんだったら
気軽にお互いがsourceを都合で勝手に変えるもんじゃないだろｗ
共有しているのなら連携して修正しないとね
0388Name_Not_Found
垢版 |
2018/02/14(水) 13:05:22.51ID:???
>>387
連携っていうのは、受け渡しの部分を最小限にして
お互い独立して作業ができるようにすることだぞ

何もかもがお互いに影響していたら
連携というより相手の作業を邪魔することにしかならない
0389Name_Not_Found
垢版 |
2018/02/14(水) 13:21:26.96ID:???
影響を受けないように気をつけて作るのが仕事なんじゃないでしょうか・・
0390Name_Not_Found
垢版 |
2018/02/14(水) 13:33:01.69ID:???
そうだね。だからデザイナーがclassに付け足しても
コードは影響がないように作るって話なんだよ
やっとそこ（自分の担当外の仕事）まで考えられる人がでてきたか
0391Name_Not_Found
垢版 |
2018/02/14(水) 14:25:48.56ID:???
>>386
インスタンスメソッドぐらい作成しろよ
静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ？

$('$.fn.extend({
restoreClass: function () {
let arr = [];
$(this).attr('class').split(' ').map(function (a, b, c) {
a.indexOf('org-') !== -1 ? arr.push(a) : void 0;
});
return $(this).attr('class', arr.join(' '));
}
});

$('.org-aaa').restoreClass();
0392Name_Not_Found
垢版 |
2018/02/14(水) 14:27:19.30ID:???
誤：$('$.fn.extend({
正：$.fn.extend({
0393Name_Not_Found
垢版 |
2018/02/14(水) 14:31:24.34ID:???
>>391
> 静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ？

> それは俺が>>210で提示したやり方ですね？
そんなコードを書くのが無駄だと言ったコードを
わざわざ書くとはｗ

> としなければいけなくなるということ
> そして、色やサイズのパターンが増えたらどうすんの？ということ
>
> ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
> > whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ
0394Name_Not_Found
垢版 |
2018/02/14(水) 14:35:24.91ID:???
>>393
デザインの都合でで使うクラス名の管理はデザイナーのお仕事ですｗ
0395Name_Not_Found
垢版 |
2018/02/14(水) 14:37:33.17ID:???
>>391
それから、それ気持ち悪いコードですね。
インスタンスメソッドというから何かと思えば
jQueryプラグインですか？ ならjQueryプラグインの書き方で書きましょうよｗ

なってない。手本を見せてあげましょうか？

それからほれjQueryプラグインの作り方
https://learn.jquery.com/plugins/basic-plugin-creation/
0396Name_Not_Found
垢版 |
2018/02/14(水) 14:38:25.72ID:???
>>394
はい？ですのでデザイナーに任せてデザイナーが
何をしようとコードには影響を受けないようにすべきですね。
0397Name_Not_Found
垢版 |
2018/02/14(水) 14:41:22.14ID:???
じゃ、自由に任意の文字列を投げるようにしたらいいんじゃないの？ｗ

$.fn.extend({
restoreClass: function (str) {
let arr = [];
$(this).attr('class').split(' ').map(function (a, b, c) {
a.indexOf(str) !== -1 ? arr.push(a) : void 0;
});
return $(this).attr('class', arr.join(' '));
}
});

$('.org-aaa').restoreClass('org-');
0398Name_Not_Found
垢版 |
2018/02/14(水) 14:43:23.67ID:???
>>391
まず先にバグを指摘しておきますね
org-bbb が org-aaa に変わってしまいます。

<span class="org-aaa">span</span>
<span class="org-bbb">span</span>

↓

$('.org-aaa, .org-bbb').restoreClass();

↓

<span class="org-aaa">span</span>
<span class="org-aaa">span</span>
0399Name_Not_Found
垢版 |
2018/02/14(水) 14:45:29.61ID:???
>>397
俺ならこうするなぁ。まdata-*属性使いたくないんでしょｗ
もしくは最初の初期化時にdata()メソッドで初期クラスを保存するとかね

<span class="aaa" data-original-class="aaa">span</span>
0400Name_Not_Found
垢版 |
2018/02/14(水) 14:51:59.06ID:???
>>399
それそれ、人の意図だからそれで良いと思うよ
data属性はあくまで適切な属性や要素がない場合を想定したものなので
classで賄えるんだから俺はclassを使用することを推薦するよ
0401Name_Not_Found
垢版 |
2018/02/14(水) 14:55:02.21ID:???
>>398
それはね、Bugといよりそのケースには未対応ってことなんだよ
サクッとインスタンスメソッドを作っただけなのでそれは筋違い
0402Name_Not_Found
垢版 |
2018/02/14(水) 14:57:40.74ID:???
あ、はい、バグだと指摘されたら「仕様です」ですねｗ
0403Name_Not_Found
垢版 |
2018/02/14(水) 14:59:07.57ID:???
はい、まともなコードに直してあげましたよｗ
古いIEでも動くように考慮してます。

$.fn.restoreClass = function () {
　return this.each(function() {
　　var classes = this.className.split(' ');
　　var className = $.grep(classes, function() {
　　　return this.indexOf('org-') === 0;
　　}).join(' ');
　　this.className = className;
　});
};

$('.org-aaa, .org-bbb').restoreClass();
0404Name_Not_Found
垢版 |
2018/02/14(水) 15:03:53.87ID:???
ごめん、訂正w

$.fn.restoreClass = function () {
　return this.each(function() {
　　var classes = this.className.split(' ');
　　var className = $.grep(classes, function(c) {
　　　return c.indexOf('org-') === 0;
　　}).join(' ');
　　this.className = className;
　});
};

$('.org-aaa, .org-bbb').restoreClass();
0405Name_Not_Found
垢版 |
2018/02/14(水) 15:07:09.57ID:???
そして、最新のブラウザだけで動けば良いコード

$.fn.restoreClass = function () {
　return this.each(function() {
　　let classes = $.grep(this.classList, c => c.startsWith('org-'));
　　this.className = classes.join(' ');
　});
};

$('.org-aaa, .org-bbb').restoreClass();
0406Name_Not_Found
垢版 |
2018/02/14(水) 15:12:19.54ID:???
別解

$.fn.restoreClass = function () {
　return this.attr('class', function() {
　　let classes = $.grep(this.classList, c => c.startsWith('org-'));
　　return classes.join(' ');
　});
};

$('.org-aaa, .org-bbb').restoreClass();
0407Name_Not_Found
垢版 |
2018/02/14(水) 15:16:01.43ID:???
>>406のように特定の条件（わかるかな？ｗ）を満たせば
extendでもできなくはないですがね。

$.fn.extend({
　restoreClass: function () {
　　return this.attr('class', function() {
　　　let classes = $.grep(this.classList, c => c.startsWith('org-'));
　　　return classes.join(' ');
　　});
　}
});

$('.org-aaa, .org-bbb').restoreClass();
0408Name_Not_Found
垢版 |
2018/02/14(水) 15:17:43.10ID:???
>>401
> それはね、Bugといよりそのケースには未対応ってことなんだよ

jQueryのプラグインの形式として使えるくせに、
jQueryで使えるセレクタを使ったら正しく動かないのはバグだよ

それなら関数にしたほうがまだマシ
0409Name_Not_Found
垢版 |
2018/02/14(水) 15:21:59.42ID:???
data-*属性使えばシンプルに解決できる問題なのに、変な仕組みを作って
コードを書いたのは良いが、バグありで
map使ってるくせに戻り値を利用せず、条件に応じてpushかするような
コードを書くようじゃぁ、まだまだ初心者ですね。考え方もコードも　┐(´ー｀)┌ﾔﾚﾔﾚ
0410Name_Not_Found
垢版 |
2018/02/14(水) 15:36:24.95ID:???
建設的なレスをしないのに限ってああだこうだ言うんだよね
0411Name_Not_Found
垢版 |
2018/02/14(水) 15:39:59.97ID:???
>>409
class名できることをdata-*属性の方がシンプルだとか頭悪そうだよな
ワロタ
0412Name_Not_Found
垢版 |
2018/02/14(水) 15:41:46.32ID:???
jQuery 仮想質問に答えて罵るスレッド
この方がこのスレに合ってると思う
0413Name_Not_Found
垢版 |
2018/02/14(水) 15:47:11.27ID:???
>>411
> class名できることをdata-*属性の方がシンプルだとか頭悪そうだよな

まあ実際見てみれば明らかだよ

>>274にも書いたけど

<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"}) これだけで終わり


> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
という流れで、 .removeClass()を使う時点で、おかしいと感じないとダメ
・・・はどうなっとるんじゃ？と

> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと

聞いてみたら↑案の定こういうレスが返ってきたわけで、
使い方間違ってるなーという話さ
0414Name_Not_Found
垢版 |
2018/02/14(水) 17:13:31.22ID:???
>>408
ツッコミどころをわざと作ってやってんだよ
その方が楽しいだろ？
案の定、必死に噛み付いて来てるしｗ
0415Name_Not_Found
垢版 |
2018/02/14(水) 17:20:41.61ID:???
ツッコミどころをわざと作ってやってんだよ
0416Name_Not_Found
垢版 |
2018/02/14(水) 17:22:30.95ID:???
>>413
> $(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり
コーヒー噴いたじゃないかよｗｗｗ
それってね結局はこれと一緒
$(…).css({"color": "red", "font-size": "large"})
単にプロパティーを変更しているだけなんだけどｗ
脳内で満足してるだけ
0417Name_Not_Found
垢版 |
2018/02/14(水) 17:28:32.81ID:???
>>416
いや、服の色が赤で、サイズがLって意味だけど？
MとかLとかSとかLLで気づかないかね？
0418Name_Not_Found
垢版 |
2018/02/14(水) 17:33:57.29ID:???
ツッコミどころをわざと作ってやってんだよ？
0419Name_Not_Found
垢版 |
2018/02/14(水) 22:34:50.81ID:???
>>383
動的にということだから他の部分でも～Classメソッド使ってると思われ
その流れでremove/addClassの方が自然なような
0421Name_Not_Found
垢版 |
2018/02/15(木) 08:44:13.60ID:???
>>420
だからclassを使うのが間違ってるわけだから
そもそもtoggleClassもいらんのだよ。
単にdata-*属性に値を入れるだけ
0422Name_Not_Found
垢版 |
2018/02/15(木) 08:48:25.05ID:???
data-zaiko=true
data-zaiko=false
とかね
0423Name_Not_Found
垢版 |
2018/02/15(木) 09:11:14.96ID:???
>>421
間違っていることはないよ
どちらを使っても良いんだよ
脳内の問題
0424Name_Not_Found
垢版 |
2018/02/15(木) 09:21:21.79ID:???
classっていうのは種類って意味だよ。
一つの要素がそんなに複数の種類になることなんてない。
通常は種類は一種類。OOCSSなんかは複数のスタイルで
継承関係を表しているだけで種類は一種類

activeとかdisableなんてのも本来はclassの用途としては
間違っている。実際input要素とかは別の属性だしね

悪影響がないならclassを使ってもいいけど
真偽値のみに留めておくのが良い

やりにくくなったらdata-*属性を使ったほうが良い
0425Name_Not_Found
垢版 |
2018/02/15(木) 09:53:16.57ID:???
継承関係を表しているだけで種類は一種類？
class="dog male"
class="cat female"
種と性別はどっちがどっちを継承してるの？
本来はclassの用途としては間違っているってdata-の仕様が出来るまではみんな間違ってたってこと？
0426Name_Not_Found
垢版 |
2018/02/15(木) 10:01:05.35ID:???
> 種と性別はどっちがどっちを継承してるの？

自分で書いてるじゃん。

class=種類は「種」だよ。
性別は属性
0427Name_Not_Found
垢版 |
2018/02/15(木) 10:15:39.40ID:???
人間ならmaleとfemaleと見ただけで、それが性別であることはわかるだろうけど、
コンピュータから見れば、わからないからね。

各順番を片方逆にしていたら、

class="dog male"
class="female cat"

片方は dog で片方は female という種なんだと
認識してもおかしくない

これがプログラミング言語であれば、
var class = "male" なんてコードは書かないだろう
0428Name_Not_Found
垢版 |
2018/02/15(木) 11:36:40.10ID:???
長いだけで中身空っぽだぞ
0429Name_Not_Found
垢版 |
2018/02/15(木) 11:49:16.64ID:???
性別は属性って言ったって、data-できる前<div sex="female">と書いていたのか？
class使ってたんじゃないの？本来野郎はそこ説明しろよ。
0430Name_Not_Found
垢版 |
2018/02/15(木) 12:08:30.91ID:???
>>429
昔classしか選択肢がない状況でclass使っていたからってなんだっていうのだろうか？

昔の話をするならば、IE6は複数のクラスを指定しても最後の一つしか認識しないバグが有るし
http://css-eblog.com/ie-css-problems/box.html

IE4、NN4の時代にはクラスには一つしか指定できなかった
http://www.tohoho-web.com/lng/200002/00020242.htm

HTML3.2だとそもそもclassが存在しなかった
https://qiita.com/anchoor/items/02e4af0f630f5f9b2470

昔の仕様を持ち出してきて、昔はclass使っていなかっただろ！とか
一つしか指定してなかっただろ！とか言うことに何か意味があるのか？
0431Name_Not_Found
垢版 |
2018/02/15(木) 13:32:31.76ID:???
>>424
class属性は種類というより部類。例えば、aaa と bbb と　ccc という種類がある
'aaa ccc' or 'bbb ccc' は種類によって分けた部類となる
HTMLは論理要素は意味を持つが物理要素は外見だけなので何の意味もなく
個々の意図でしかない
0433Name_Not_Found
垢版 |
2018/02/15(木) 14:10:26.80ID:???
無意味ってことだろうな
0434Name_Not_Found
垢版 |
2018/02/15(木) 15:06:02.39ID:???
classify分類する
classification分類
class = ???
0437Name_Not_Found
垢版 |
2018/02/15(木) 21:23:58.79ID:???
ここ面白いな、。次のスレタイはこれで。
質問者の質問を元に自分で勝手に変更解釈して自分で答えを書くスレ。
0438Name_Not_Found
垢版 |
2018/02/16(金) 07:20:29.85ID:???
まだやっていたのか
静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる
WeakMapを使えば良いだけ
0439Name_Not_Found
垢版 |
2018/02/16(金) 09:08:20.37ID:???
>>437
ちがうよ
質問をお題に知識をひけらかしてマウントとるスレ
だろ
0440Name_Not_Found
垢版 |
2018/02/16(金) 10:01:31.15ID:???
>>438
まだやってるのはお前だけdata-*属性を使うことに対して異論は出てない
更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい
ということだろうから、data-*属性ならば属性セレクタで対応は可能だが
WeakMapを使った場合は実現できない
0441Name_Not_Found
垢版 |
2018/02/16(金) 14:50:50.13ID:???
<ul class="aaa"l>
<li>リスト0</li>
<li>リスト1</li>
</ul>
<ul class="bbb"l>
<li class="selected">リスト2</li>
<li>リスト3</li>
</ul>

var obj = $('aaa li, bbb li');
console.log(obj); [ 0: li, 1: li, 2: li.selected, 3: li ]
console.log(obj.filter('.selected').index()); // 0
console.log(obj.filter('.selected').prev()); // length: 0

ul.aaa li と ul.bbb li を統合したobjから .selected の一つ前の要素を
取得したいのですがやり方間違っています？
0442Name_Not_Found
垢版 |
2018/02/16(金) 14:52:09.98ID:???
>>444ですがhtmlにゴミが入っていましたのでこれになります
<ul class="aaa">
<li>リスト0</li>
<li>リスト1</li>
</ul>
<ul class="bbb">
<li class="selected">リスト2</li>
<li>リスト3</li>
</ul>
0443Name_Not_Found
垢版 |
2018/02/16(金) 21:14:40.51ID:???
>>421
それは意味が違うし、するにしても面倒
toggleClassは（引数なしなら）今の値の逆、つまり今の値が何かは関係ない
422だとこうなる
今の値取得->逆->設定
0444Name_Not_Found
垢版 |
2018/02/16(金) 21:19:11.57ID:???
> 今の値の逆、つまり今の値が何かは関係ない

矛盾しとるんだが？
0446Name_Not_Found
垢版 |
2018/02/16(金) 21:21:53.07ID:???
>>439
うん、それもあるな
しかもその知識は質問者の都合無視
0447Name_Not_Found
垢版 |
2018/02/16(金) 21:23:54.46ID:???
>>444
全然しとらんやんけ
現在値を気にする必要ない
0448Name_Not_Found
垢版 |
2018/02/16(金) 21:27:16.18ID:???
今の値の逆だろ？
今の値の
0449Name_Not_Found
垢版 |
2018/02/16(金) 21:31:23.41ID:???
redの逆って何？青になんの？
じゃorangeだったら？？？
0450Name_Not_Found
垢版 |
2018/02/16(金) 21:33:57.28ID:???
toggleClassは（引数なしなら）今の値（red）の逆、つまり今の値が何かは関係ない
0451Name_Not_Found
垢版 |
2018/02/16(金) 21:36:42.96ID:???
> 今の値（red）の逆、つまり今の値が何かは関係ない

何このなぞなぞ
狐につつまれたような気分だ
0452Name_Not_Found
垢版 |
2018/02/16(金) 21:41:32.05ID:???
わかってるのにくだらない突っ込み多すぎ
redの追加削除
0453Name_Not_Found
垢版 |
2018/02/16(金) 21:45:31.86ID:???
今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない
誰でもすぐ分かるのにもうマウントに必死すぎて笑えるわ
0454Name_Not_Found
垢版 |
2018/02/16(金) 21:47:27.66ID:???
それが

<span class="aaa bbb ccc ddd ・・・">
を
<span class="aaa">

にする話と何が関係有るのでしょうか？
0455Name_Not_Found
垢版 |
2018/02/16(金) 21:49:14.25ID:???
今の値が何かは関係ないということは
ありでもなしでいいわけですよね？

<span class="">← なしです
なしの時にtoggleClass（引数なしなら）を実行したら
なんになるのでしょうか？
0456Name_Not_Found
垢版 |
2018/02/16(金) 21:50:41.94ID:???
>>449
赤の逆色は青じゃない、緑
マンセル色相環
0457Name_Not_Found
垢版 |
2018/02/16(金) 21:52:25.10ID:???
>>453
そんなにマウント取られたって言うのは可愛そうじゃね？
本人はマウント取られてないつもりかもしれんじゃん
わざわざあんたいまマウント取られたんだよって教えてあげるとかｗ
0458Name_Not_Found
垢版 |
2018/02/16(金) 22:07:33.09ID:???
スマンここは間違えた
酔っ払ってたわ
引数ありなら、ね
0459Name_Not_Found
垢版 |
2018/02/16(金) 22:14:59.21ID:???
酒のせいにして何もかも間違っていたと言っていたほうが良いよ？
何一つあってないんだから
0460Name_Not_Found
垢版 |
2018/02/16(金) 22:15:18.00ID:???
>>450
> 今の値（red）の逆、つまり今の値が何かは関係ない

>>453
> 今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない

？？？？
今の値は（red）なの？
有無のこと、あるなしのことなの？？？
redと有無って同じなの？？？
0461Name_Not_Found
垢版 |
2018/02/16(金) 22:25:11.56ID:???
次のスレタイ＝マウント取りたくてウズウズしているスレ
0463Name_Not_Found
垢版 |
2018/02/16(金) 22:27:35.74ID:???
まあぶっちゃけマウントは取られる方が悪い
0465Name_Not_Found
垢版 |
2018/02/16(金) 22:30:40.82ID:???
マウント取られて悔しいのはわかるが、
マウントを避難するんじゃなくて

↓これをtoggleClassでどうしたいのかをさっさと書けばいい

<span class="aaa bbb ccc ddd ・・・">
を
<span class="aaa">

既出の話題ならはいらんぞ
・・・の管理が面倒くさいって話だからな
0466Name_Not_Found
垢版 |
2018/02/16(金) 22:34:45.03ID:???
>>461
ただの揚げ足取りでマウントすらになってない
0467Name_Not_Found
垢版 |
2018/02/16(金) 22:35:59.15ID:???
だから必死にマウントを非難してるんじゃないよｗ
0468Name_Not_Found
垢版 |
2018/02/16(金) 22:38:31.83ID:???
>>440
> 更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい
ということだろうから
勝手に妄想で「静的につけたclassが動的処理で消える問題」と無関係な条件を付けて、あなたの思う方向に結論を向けられても困る
属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか
0469Name_Not_Found
垢版 |
2018/02/16(金) 22:39:08.10ID:???
> 属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか

わからんね。具体的に説明してみな
0470Name_Not_Found
垢版 |
2018/02/16(金) 22:40:32.55ID:???
なお、静的に付けたclassが消えてしまう問題は
質問者自ら、そうなんだけど・・・って言っている

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個と少ないので楽かなと
0471Name_Not_Found
垢版 |
2018/02/16(金) 22:41:45.48ID:???
>>465
toggleClass('bbb');
toggleClass('ccc');
toggleClass('bbb ddd');
じゃね
0472Name_Not_Found
垢版 |
2018/02/16(金) 22:43:48.12ID:???
>>471
そうすると、bbbとかcccとかdddとかが増えるたびに
メンテするのが面倒くさいっていうのが本題です
0473Name_Not_Found
垢版 |
2018/02/16(金) 22:46:06.59ID:???
ちなみに
静的に付けたclassが消えてしまうことは問題でもなんでもない
承知でやってること
0474Name_Not_Found
垢版 |
2018/02/16(金) 22:47:30.41ID:???
承知でやっているがもっといい方法ないかなーってこと。
0476Name_Not_Found
垢版 |
2018/02/16(金) 22:48:16.75ID:???
>>472
面倒は初期だけのことでeeeが増えてその処理(toggleClass('eee')など)が増えることは当たり前で面倒でもなんでもない
0478Name_Not_Found
垢版 |
2018/02/16(金) 22:51:02.68ID:???
>>477
じゃあ、data-*属性のどこが問題かの話を何故しないのですか？
もっと優れたやり方（data-*属性）を提示したんだから
もうclassに拘る必要ないでしょ良いでしょｗ　

はいはい、classわすれたー
data-*属性でいきましょうー
0479Name_Not_Found
垢版 |
2018/02/16(金) 22:51:50.08ID:???
>>476
じゃあお前はそこで議論から外れてください。
0480Name_Not_Found
垢版 |
2018/02/16(金) 22:51:58.57ID:???
>>469
属性なんだから、いくらでもremoveClassやsetAttributeで干渉できるだろ
0482Name_Not_Found
垢版 |
2018/02/16(金) 22:55:36.03ID:???
>>478
ありかなしか、次のレスで解決してるのでけっこうです
でも参考になりましたわ
0483Name_Not_Found
垢版 |
2018/02/16(金) 22:57:06.06ID:???
よい方法だろうがなんだろうがゴリ押しdataくんが大嫌いなのでdataは絶対使いません！
0485Name_Not_Found
垢版 |
2018/02/16(金) 23:00:35.81ID:???
482の追記
data-属性はcssからめて別では使ってます
どうもでした
0486Name_Not_Found
垢版 |
2018/02/16(金) 23:02:10.82ID:???
>>484
じゃあclassを動的処理で消している部分をなくせば問題ないってことですよね。

=class使うなってことです。
0488Name_Not_Found
垢版 |
2018/02/16(金) 23:07:21.07ID:???
>>486
属性を使うのを止めれば良い
お前が>>440で見当違いの事を言ってたから反論しただけなんだが、自分の間違いも認められないとは
0489Name_Not_Found
垢版 |
2018/02/16(金) 23:09:02.58ID:???
>>487
面倒だから解決方法を探してる
面倒じゃない人はお前ん中では面倒じゃないんだから
お前ん中の世界にいればいいって話
0490Name_Not_Found
垢版 |
2018/02/16(金) 23:10:18.31ID:???
>>488
classも属性ですが？
属性を使うな、何を言ってるのでしょうか。

classが動的処理で消えるというなら、
data-*属性を使ってclassに一切触らなければ
classが消えることはありません。

反論どうぞ
0492Name_Not_Found
垢版 |
2018/02/16(金) 23:16:20.92ID:???
> data-*属性を使ってclassに一切触らなければ
data-*属性も動的処理で消せるだろ
アホなのか、こいつは
0493Name_Not_Found
垢版 |
2018/02/16(金) 23:16:57.84ID:???
>>491
読み返した所で>>438が馬鹿だとしか思えませんが？

なぜかって？classが動的処理で消える問題とか言ってるから馬鹿なんですよ。
classがremoveClass()でいっぺんに消した時に全部消えてしまうって話なんだから
data-*を使えばremoveClass()を使ったとしても消えることはない
そもそもclassを使わないのだからremoveClass()自体不要

>>438が馬鹿な理由わかりますか？この話をしてるのに
JavaScriptから消す方法があるの話を勘違いしてるんですよ
バカ以外の何物でもないでしょう

何か反論は？
0494Name_Not_Found
垢版 |
2018/02/16(金) 23:17:32.27ID:???
> data-*属性も動的処理で消せるだろ

墓穴ほってるよなーｗ

動的処理で消せること自体は問題にしてないのにｗｗｗ
0495Name_Not_Found
垢版 |
2018/02/16(金) 23:23:18.17ID:???
>>438は問題に対する解を持っている
data君は問題とは思っていないし、全く別のベクトルで問題を指摘してる
お互いに問題とは思っていないのだから、平行線なのは当然の事
だが、data君は>>438が導き出した答えの意味を理解してないだろうな
0496Name_Not_Found
垢版 |
2018/02/16(金) 23:24:43.18ID:???
>>495
じゃあ理解してるお前が説明してみせたら？
そしたら逃げるんだよなーｗ
0497Name_Not_Found
垢版 |
2018/02/16(金) 23:28:06.66ID:???
data君が気が付いてない問題は、スコープでしょ
属性は公開されているわけだし、その答えに行き着くのは理解できるけどね
0498Name_Not_Found
垢版 |
2018/02/16(金) 23:29:53.34ID:???
誰かここでスコープが関係してくる理由説明できる？誰もできないと思う

多分こいつ、自作自演してる。書いた本人だわ
自分にしか通じないことしか言ってない
0499Name_Not_Found
垢版 |
2018/02/16(金) 23:32:30.76ID:???
まさか、変数のスコープを知らない御仁がいるとは
0500Name_Not_Found
垢版 |
2018/02/16(金) 23:35:27.92ID:???
今の属性の話に変数のスコープは関係ないからねｗ

関係あるというのなら、どういうふうに関係があるのか
説明してもらおうか。変数のスコープの説明じゃないぞ
変数のスコープが今回のclass属性の代わりにdata-*属性を使うと
管理しやすくなるという話にどう関わってくるのかの説明だ
0501Name_Not_Found
垢版 |
2018/02/16(金) 23:37:39.77ID:???
解決してるのに解決してないと言い張ってどうしてもそれを使わないと納得がいかないスレ
0502438
垢版 |
2018/02/16(金) 23:40:18.11ID:IDQ8lYl5
何とも、面倒くさい奴だな
WeakMapを使ってコードを書く場面を想定しろ

> 静的につけたclassが動的処理で消える問題
静的処理とは別に動的処理だけで参照できる場所にデータを持てばよい
WeakMapで作られた変数のスコープはグローバルスコープにしなければ、外部から干渉されない
当然、静的処理でマークアップされたclass属性やdata-*属性と衝突する事もない
属性はDOM APIによって開けた環境にあるので、いくらでも外部干渉を受ける
つまり、属性は静的処理と動的処理が衝突してしまうという事だ
0503Name_Not_Found
垢版 |
2018/02/16(金) 23:45:55.47ID:???
>>502
じゃあ属性を使わずそのWeakMapを使って
cssで色をつける方法を書いてください
0504Name_Not_Found
垢版 |
2018/02/16(金) 23:47:10.72ID:???
ちなみにdata-*属性を使った場合はこう書きます

[data-hoge="foo"] { color: red }
0505Name_Not_Found
垢版 |
2018/02/16(金) 23:48:28.73ID:???
data君がどう言い訳するのかと思ったら、「論点のすり替え」か
0506Name_Not_Found
垢版 |
2018/02/16(金) 23:48:55.20ID:???
classの代わりとして使えないんじゃ、意味ないですからね
0507Name_Not_Found
垢版 |
2018/02/16(金) 23:50:04.42ID:???
論点は最初からclassの代わりとして使えることが条件ですが？
0508Name_Not_Found
垢版 |
2018/02/16(金) 23:50:17.89ID:???
>>498
スコープ君は質問者ではないよ
おれもなぜスコープが出てくるのかわかりませぬ
0509Name_Not_Found
垢版 |
2018/02/16(金) 23:50:46.54ID:???
結局、変数のスコープで合ってるじゃん
自分で気が付かなかった事実を認めたくないから話題を逸らしてるんでしょ
0510Name_Not_Found
垢版 |
2018/02/16(金) 23:53:18.48ID:???
たぶん、data-*属性と聞いて、jQueryのdata()メソッド、要素に紐付いたデータを持たせたい
という話と勘違いしちゃったんでしょうねｗ

そんな話はしてない。もともとclassを使おうとしていて、管理が面倒くさい
どうにかならないかって話で、data-*属性をつかえばいいという流れ
data-*属性はclassの代替として使用できる。そして管理が楽になる
（classは名前無しで値しか入れられないが、data-*属性は、data-名前=値という組みで入れられるから）
0511Name_Not_Found
垢版 |
2018/02/16(金) 23:54:29.90ID:???
>>509
> 結局、変数のスコープで合ってるじゃん

日本語怪しい。わざと曖昧なことを言って論点をすり替えようとしている。

変数のスコープで何があってるのか。
そして今回の話にどう絡んでくるのか言ってみ

classの代替としてWeakMapが使えないのはすでに証明済み
0512Name_Not_Found
垢版 |
2018/02/17(土) 00:00:13.27ID:???
WeakMapを使う時点で変数に格納するのは分かり切っているんだが
0513Name_Not_Found
垢版 |
2018/02/17(土) 00:01:31.24ID:???
WeakMapを使う時点ってなんのこと？

class属性の代替としてdata-*属性を使うと管理が簡単だよ
CSSでも属性セレクタで使えるし

って話の中に、いきなり無関係のWeakMapがでてきたんでしょ？
WeakMapを使う"時点" なんてものは存在してない
0514Name_Not_Found
垢版 |
2018/02/17(土) 00:02:46.23ID:???
>どうにかならないか

まあ質問者はそんなこと言ってなくて回答者が勝手に作って話進めてるだけなんだけどなｗ
0515Name_Not_Found
垢版 |
2018/02/17(土) 00:03:32.57ID:???
言ってますがなｗ

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個と少ないので楽かなと
0516Name_Not_Found
垢版 |
2018/02/17(土) 00:04:22.20ID:???
は？言ってないじゃんｗ
0517Name_Not_Found
垢版 |
2018/02/17(土) 00:05:21.13ID:???
質問者はありかなしかだけ
そのだいぶ後に追記してるだけ
0518438
垢版 |
2018/02/17(土) 00:06:10.14ID:LqHG2ZTu
俺は質問者ではないよ
ただの傍観者で「WeakMapを使えばいいのに」と思ったから横から口をはさんだだけ
少なくとも、>>438の問題はCSS適用外の仕様で考えているから、>>440や>>503に対しては「何を頓珍漢な事を」ぐらいにしか思っていない
元々、静的処理とは別のスコープを持つことを意図しているわけで、CSSが適用できないのは当然の事だ

何か知らんが、俺が取り上げている問題を無視して、俺が取り上げてもいない問題を勝手に持ってきて反論してくるから、正直疲れる
読解力がないというよりも読む気が無くて、自分の考えしか頭にないタイプなのかね
0520Name_Not_Found
垢版 |
2018/02/17(土) 00:21:55.44ID:???
>>513
静的につけたclassが動的処理で消える問題
0521Name_Not_Found
垢版 |
2018/02/17(土) 00:28:50.25ID:???
質問を自分仕様に変えて自慢げに書くスレ
質問者が言ってもいないことを言ったと言い張るスレ
0522Name_Not_Found
垢版 |
2018/02/17(土) 00:32:42.55ID:???
質問者が問題としてないことを問題として扱うスレ

ま、これはいいか
「こういう仕様ならこういう方法もあるよ」くらいなら
0523438
垢版 |
2018/02/17(土) 00:35:39.28ID:LqHG2ZTu
> ま、これはいいか
> 「こういう仕様ならこういう方法もあるよ」くらいなら
俺もそう思う
条件付き提案に「そんな条件は許さん」と食って掛かる人間が一番困る
0524Name_Not_Found
垢版 |
2018/02/17(土) 00:39:10.10ID:???
>>518
class属性の代わりにdata-*属性を使うという話をしてる
その話にWeakMapが頓珍漢な答であることは明白
だから黙ってろって話
0525Name_Not_Found
垢版 |
2018/02/17(土) 00:44:17.87ID:???
日本語読めないのかな？


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個と少ないので楽かなと


----------

$('.aaa').removeClass().addClass('aaa');
とすると、.aaaに静的に付けたその他のクラスが消えてしまうという指摘を
>>142でやっていて

質問者>>143のレスの冒頭、
それはそうなんだけど。と認めている。
そして・・・の管理が面倒だけど、最初つけるclassは1,2個で楽かなといってる

最初つけるclassが何個でもいいし・・・の管理も楽になる手段として
data-*属性を使う方法を提案している。

ここまではいいよな？
0526Name_Not_Found
垢版 |
2018/02/17(土) 00:44:37.61ID:???
data君はちゃぶ台返しをするから好きになれん
「スコープって何よ？⇒説明⇒いや、そもそもWeakMapの話なんてしてないから」
他人に説明させておいてそれはないだろ
「そもそもWeakMapの話なんてしてない」が結論ならスコープの説明を求める必要がない
0527Name_Not_Found
垢版 |
2018/02/17(土) 00:47:06.65ID:???
>>525
静的classと動的挿入classの管理が面倒だから分割したいって要件に読めるけど
0528Name_Not_Found
垢版 |
2018/02/17(土) 00:50:51.26ID:???
「静的classと動的挿入classの管理が面倒だから分割したいって」ってどういう意味ですか？

他の人、誰か理解できる人いますか？

これ自分用語で誰にも理解できない文章ですよね
0529Name_Not_Found
垢版 |
2018/02/17(土) 00:52:37.58ID:???
静的につけたclass名と動的につけたclass名が衝突してしまう可能性があるが、名前を管理するのが面倒だから処理を分割したい、という意味だろ
スコープの下りを読めば分かるだろうに
0530Name_Not_Found
垢版 |
2018/02/17(土) 00:52:55.15ID:???
>>526
> data君はちゃぶ台返しをするから好きになれん

ちゃぶ台？ 最初からスコープ関係ないだろって言ってんだろ

↓ほれみろや。俺は関係しないと最初から言ってる。

498 自分：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:29:53.34 ID:???
誰かここでスコープが関係してくる理由説明できる？誰もできないと思う

500 名前：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:35:27.92 ID:???
今の属性の話に変数のスコープは関係ないからねｗ



関係するというのなら説明してみろって話
そして説明を聞いて、やっぱりスコープ関係してないじゃんかという結論
最初からスコープ関係ないって話をしてる。
0531Name_Not_Found
垢版 |
2018/02/17(土) 00:53:30.87ID:???
>>529
だからスコープ関係ないって言ってんだろうが
いい加減にしろ
「何を頓珍漢な事を」ぐらいにしか思っていないぞ
0532Name_Not_Found
垢版 |
2018/02/17(土) 00:55:06.96ID:???
>>529
> 静的につけたclass名と動的につけたclass名が衝突してしまう可能性があるが、

静的に付けたclass名がaaaで、動的に付けたclass名もaaaで
衝突してしまうと言いたいんですか？

では、最後の質問です。それはどこを見てそう勘違いしたんですか？

衝突ですよね。「衝突」「被る」「重複する」「同じ名前」など
それに類する言葉が使われているレスを指ししめなさい
0533Name_Not_Found
垢版 |
2018/02/17(土) 00:56:07.99ID:???
指し示すっていうのは、あんたが読んで勘違いしてしまったレスなんで
自分で書いたレス読んで自分が勘違いしたなんて
アホなことはいわないようにねｗ
0534Name_Not_Found
垢版 |
2018/02/17(土) 00:56:22.47ID:???
というか、>>142が問題提起したものだろ
流れ見れば、誰ても分かると思うが
0535Name_Not_Found
垢版 |
2018/02/17(土) 00:57:43.32ID:???
これですね。>>142が問題点を指摘して
質問者の>>143が「そうなんだけど」と納得した流れです。


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
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
0536Name_Not_Found
垢版 |
2018/02/17(土) 00:59:08.15ID:???
>>530
関係ないと初めから分かっているなら、スコープの質問をしなければよかったと思うよ
質問するまでもなく、分かっているんだから
0537Name_Not_Found
垢版 |
2018/02/17(土) 01:01:09.22ID:???
>>536
オマエ馬鹿なのか？

スコープの質問なんかしてないが？


500 名前：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:35:27.92 ID:???
今の属性の話に変数のスコープは関係ないからねｗ

関係あるというのなら、どういうふうに関係があるのか
説明してもらおうか。変数のスコープの説明じゃないぞ
変数のスコープが今回のclass属性の代わりにdata-*属性を使うと
管理しやすくなるという話にどう関わってくるのかの説明だ
0539Name_Not_Found
垢版 |
2018/02/17(土) 01:01:54.53ID:???
こうやってスコープの説明じゃないぞっていっても
スコープの質問をしたと勘違いするバカが居るんだよなぁｗ
0540Name_Not_Found
垢版 |
2018/02/17(土) 01:02:50.06ID:???
こうやって、俺が何を言ったかをいちいち書いておかないと
話を捻じ曲げてくるからな。
ずーっと捻じ曲げようとしている。
だから何度も引用するわ
0541Name_Not_Found
垢版 |
2018/02/17(土) 01:05:38.50ID:???
一人で何連投するつもりなんだか
0542Name_Not_Found
垢版 |
2018/02/17(土) 01:06:54.46ID:???
このスレを「スコープ」で検索すると最初に見つかるのはこれ


497 名前：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:28:06.66 ID:???
> data君が気が付いてない問題は、スコープでしょ
> 属性は公開されているわけだし、その答えに行き着くのは理解できるけどね

それに対する最初のレスで、すでにスコープが関係ないことを示している
関係有ることを誰も説明できない。だって関係ないもの。

498 自分：Name_Not_Found[sage] 投稿日：2018/02/16(金) 23:29:53.34 ID:???
> 誰かここでスコープが関係してくる理由説明できる？誰もできないと思う
>
> 多分こいつ、自作自演してる。書いた本人だわ
> 自分にしか通じないことしか言ってない
0543Name_Not_Found
垢版 |
2018/02/17(土) 01:07:33.01ID:???
>>541
俺が飽きるまで何連投でもするよｗ
せっかくの、お・も・ち・ゃｗ
0544Name_Not_Found
垢版 |
2018/02/17(土) 01:10:58.59ID:???
ここは質問スレではありません
data君のストレス発散スレです
0545Name_Not_Found
垢版 |
2018/02/17(土) 01:13:49.56ID:???
いいえ、質問に答えているだけです。
次から次へとくるよくわからない質問に
答えているだけです。
0546Name_Not_Found
垢版 |
2018/02/17(土) 02:22:55.37ID:???
data君はどうしてそんなに暇なのですか？
0547Name_Not_Found
垢版 |
2018/02/17(土) 09:13:40.43ID:???
おもちゃ遊びがしたいなら余所へ行けよ
0548Name_Not_Found
垢版 |
2018/02/18(日) 10:54:35.69ID:???
>>535
そうなんだけどは問題点としてではなくaaaが一旦消えること
aaaにCSS（見た目）は当ててないので閲覧者に不便はない
実際ブラウザで正常に動作する（＝だからいいではないが）からいいんだよ
別に問題とは思ってないし問題にはなってない
0549Name_Not_Found
垢版 |
2018/02/18(日) 12:33:47.02ID:???
>>548
動くかどうかじゃなくてメンテナンスコストの問題

> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
0551Name_Not_Found
垢版 |
2018/02/18(日) 18:08:20.45ID:???
data-属性使ってほしくないんだろｗ
0552Name_Not_Found
垢版 |
2018/02/18(日) 21:18:43.54ID:???
data-属性使ってほしいんだろｗ
0553Name_Not_Found
垢版 |
2018/02/18(日) 23:31:46.65ID:???
結局toggleClassはどうなったんだっけ
0555Name_Not_Found
垢版 |
2018/02/19(月) 08:29:30.07ID:???
$('.aaa')
　.removeClass().addClass('aaa').end()
.attr('class', 'aaa');
0558Name_Not_Found
垢版 |
2018/02/19(月) 23:00:02.75ID:???
const君なんていたのかｗ
0559Name_Not_Found
垢版 |
2018/02/19(月) 23:20:56.86ID:???
優秀な書き込みは全部俺♪
0561Name_Not_Found
垢版 |
2018/02/20(火) 20:38:40.17ID:???
>>548って最初の質問の時点で読み取れるよな
勝手に問題、困ってると解釈して勝手に修正しようとしてたわけだ
0562Name_Not_Found
垢版 |
2018/02/20(火) 22:42:01.26ID:???
data君の攻撃は止まらない
0563Name_Not_Found
垢版 |
2018/02/20(火) 23:11:37.66ID:???
> >>548って最初の質問の時点で読み取れるよな

その次のレスで覆ったんだよ
0564Name_Not_Found
垢版 |
2018/02/20(火) 23:23:10.95ID:???
data君は自分が優秀だと思っている
こんなところにいる底辺な奴らに自分が馬鹿にされていいわけがない
そうだ、明らかに馬鹿なこいつを煽ってやろう
馬鹿なこいつは自爆するからそこを追求してやればいい
そうして、皆が自分を優秀な人間だと認めるだろう
0565Name_Not_Found
垢版 |
2018/02/20(火) 23:30:10.41ID:???
相変わらず中身が無いことをべらべら喋るなｗ
0566Name_Not_Found
垢版 |
2018/02/21(水) 01:03:44.87ID:???
date君のプロファイリングか
0570Name_Not_Found
垢版 |
2018/02/21(水) 22:41:21.32ID:???
>>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-*属性を使った場合は、全ての問題が解決する
0573Name_Not_Found
垢版 |
2018/02/22(木) 15:37:04.38ID:???
classは論外だが何でもかんでもdata-に頼るべきではない
<custom-postit data-form=circle
のように基本的に使うものであって、
ある特定のJS内で完結する場合の要素へのデータの紐付けはWeakMapを使うべき
0575Name_Not_Found
垢版 |
2018/02/22(木) 20:31:42.67ID:???
弱くて迷いそう。ストロングナビ使いたい。
0576Name_Not_Found
垢版 |
2018/02/22(木) 20:58:23.32ID:???
>>574
詳しく言うとJS内で完結するというのは主にCSSと連携しないってことだよ
CSSからJS内の変数は読み書きできないから変数の値が○○の時に色を変えるとかはできない
data-ならCSSと連携できるがそれが必要ないなら場合はJSでいい

もともとは全部classに入れていたわけだけど、classをCSSと連携しない使い方をしてるなら
data-ではなくJS側に全部持ってこれるということ
今回がどっちに当てはまるのかはしらないけどね
0577Name_Not_Found
垢版 |
2018/02/22(木) 21:07:38.86ID:???
ん？元は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側に持ってこれるとは思わないな。
0578Name_Not_Found
垢版 |
2018/02/22(木) 21:29:38.74ID:???
> ん？元はclass使っていたってことは、CSSと連携したいってことでは？
ただの思い込み
0579Name_Not_Found
垢版 |
2018/02/22(木) 21:51:07.16ID:???
その理屈で言えば、WeakMapでできるというのも思い込みなわけで
0580Name_Not_Found
垢版 |
2018/02/22(木) 21:51:08.74ID:???
＄（＇．ａａａ＇）．ａｔｔｒ（＇ｃｌａｓｓ＇，　＇ａａａ＇）；
0581Name_Not_Found
垢版 |
2018/02/22(木) 21:52:25.33ID:???
>>579
最初はそれに気づかずに、CSSと連携できないって
指摘されて意見を変えたみたいねｗ
0582573
垢版 |
2018/02/22(木) 22:48:31.78ID:???
言っとくけど俺は573以降ここまでレスしてないから
それに意見を変えたって、一体どういうこと？
意見は全部573に含まれてて完結している

書いたとおり、要素とデータを結びつけるときには必ずしも要素の属性を利用しなくとも
WeakMapの方が勧められる『場合もある』と言っただけ
そしてその理由は主にセマンティクス上のもので機能の優劣を述べたつもりもない

間隔としてはグローバル変数をむやみに使うなと同じような小言
それ以上でもそれ以下でもない
大人ならすぐ他人を煽ったり話を茶化して非建設的な流れに持っていくのは辞めろ
0583Name_Not_Found
垢版 |
2018/02/22(木) 23:18:37.32ID:???
>>576
文は長いが書いてあること全然詳しくないのだが
具体的にお願いできないかな
0584Name_Not_Found
垢版 |
2018/02/22(木) 23:26:29.20ID:???
>>583
最初から意見かえたのか？

>> 438
> まだやっていたのか
> 静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる
> WeakMapを使えば良いだけ
0585Name_Not_Found
垢版 |
2018/02/22(木) 23:27:30.13ID:???
>>582
タグのclassを使う代わりに、JavaScriptの変数にしろっていう意見でOK？
0586Name_Not_Found
垢版 |
2018/02/22(木) 23:31:15.95ID:???
要するにそれを使ってスタイルを当てる、とか
カスタム要素で利用する属性である、とか
他のライブラリやモジュールから利用される、とか
第三者と共有する必要があるために、データをおおやけにする意味があるならいいが

そうでなくJSで自分自身の閉じた空間内でメモ書きがしたいだけなら
要素の属性を使うのは下品じゃないかということだろう
0587Name_Not_Found
垢版 |
2018/02/22(木) 23:37:31.10ID:???
>>585
一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
普通要素の属性を使うもんだと考え方が狭くなってないか？ということ

それと一般的抽象的に考えて、オブジェクトとデータを結びつける効果的方法である
WeakMapをもっとどんどん使っていこうよという意見
0588Name_Not_Found
垢版 |
2018/02/22(木) 23:48:20.73ID:???
いや、class属性でやっていたものをWeakMap使えばいいっていうのが
必ずしも正しくないって話だろ。cssで使えないんだから
なんでもかんでもWeakMapで解決するような言い方をするからいかんのだ
0589Name_Not_Found
垢版 |
2018/02/22(木) 23:52:33.97ID:???
>>587
> 一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
話がずれてるよ

要素とデータを結びつけたいなんて誰も言ってない
class属性のメンテナンスが面倒くさいって話をしてる
0590Name_Not_Found
垢版 |
2018/02/23(金) 09:21:20.79ID:???
>>588
自分はWMを使う方が良いケースもあると言っただけであって
なんでもかんでもWMでなんて一言も言っていない

>>589
それを言っちゃあそもそも論が出てきた最初の質問から５スレ後には既にずれてて
今や一般的な話になっている
そのクラスだって単にjQから利用するためのラベル付なのかもしれないしね
0591Name_Not_Found
垢版 |
2018/02/23(金) 10:09:01.97ID:???
>>589
要はsourceの意図
classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ
data-*="hoge" にしても結局は製作者の意図によるもの
ま、個々の勝手だが
0592Name_Not_Found
垢版 |
2018/02/23(金) 21:49:01.55ID:???
>>584
> 最初から意見かえたのか？

何言ってるかわからん
誰か別人と勘違いしてないか？
0593Name_Not_Found
垢版 |
2018/02/23(金) 22:05:16.07ID:???
>>587
それは一理ある

>>589
>class属性のメンテナンスが面倒くさい
それってdata君の言い分だよな

少なくとも質問者はそう思ってない
もっといい方法もあるよももっともだが質問者は断ってるしな
0594Name_Not_Found
垢版 |
2018/02/24(土) 00:51:29.52ID:???
>>590
> 自分はWMを使う方が良いケースもあると言っただけであって

それをいうなら、俺だって今回のケースでは
data-*属性をつかうと良いというだけで、
すべての場合でdata-*属性を使えなんて言っていない

つまり、俺が今回の問題に対してレスしている所に横から割り込んできて、
今回の問題とは無関係な話を始めたお前がおかしい
0595Name_Not_Found
垢版 |
2018/02/24(土) 00:52:35.74ID:???
>>593
> それってdata君の言い分だよな
質問者が言ってるよ

↓ほらね

143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと
0596Name_Not_Found
垢版 |
2018/02/24(土) 00:54:02.66ID:???
>>591
> classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ


その話は>>210で俺がすでにしてる

> ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
> whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ
0597Name_Not_Found
垢版 |
2018/02/24(土) 05:43:09.54ID:???
>>594
自分が言いたいのはその２つのどっちが優れているかではなく、
他の有効なやり方だってあるんだし、細かな意味的なことだって重要
だからそれぞれ適材適所バランス良く使おうねということ

今回のケースにしたって情報が不足してるんだからこれが最適だとかいう回答はできないから揉めている
結果一般論的にこれまでの全ての流れを踏まえて勝手なまとめ的にそういった感想を述べたまでで
君に当て付ける気なんて微塵もないし、完全に被害妄想
0598Name_Not_Found
垢版 |
2018/02/24(土) 08:37:35.14ID:???
>>596
無理やりとかｗ
どちらにしてもhtmlとしては個人の単なる部類に過ぎないし、文書構造からして無意味なこと
あくまで主観に過ぎない
0599Name_Not_Found
垢版 |
2018/02/24(土) 13:22:35.91ID:???
>>595
横から失礼
data-*にしてremoveClass()の部分はどうすんの？
得体のしれないclass(相当)がある場合とない場合で
0600Name_Not_Found
垢版 |
2018/02/24(土) 13:57:38.27ID:???
>>599
話を再確認しようか？

今回の話はdata-*属性を使ったら楽に実装できるという話であって
今回の話にremoveClass()が必要か？という話を先に決めないといけない

答えを言うと今回の話にremoveClass()は必要ない
0601Name_Not_Found
垢版 |
2018/02/24(土) 13:59:08.58ID:???
今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。

今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから
0602Name_Not_Found
垢版 |
2018/02/24(土) 14:36:07.77ID:???
まあ別にremoveClassなんて簡単な処理なんだけどねｗ

var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' '));
0603Name_Not_Found
垢版 |
2018/02/24(土) 14:46:41.79ID:???
こんな感じかな

$(・・・).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っぽく解釈する属性セレクタが有るから
属性を空白区切りの語のリストとして操作するプラグインは
準標準といってもいいぐらいの価値はあると思う。
0604Name_Not_Found
垢版 |
2018/02/24(土) 15:05:12.45ID:???
折角DOMTokenListが使えるclassListを使わずに
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね
0605Name_Not_Found
垢版 |
2018/02/24(土) 15:16:14.32ID:???
全くシンプルじゃない
スマートフォンがスマートじゃないのと同じこと
0606Name_Not_Found
垢版 |
2018/02/24(土) 15:17:20.45ID:???
>>604
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねｗ
0607Name_Not_Found
垢版 |
2018/02/24(土) 15:18:32.27ID:???
ほらねｗ

だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。
0608Name_Not_Found
垢版 |
2018/02/24(土) 15:19:18.02ID:???
今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに
話が通じないのは馬鹿だからか卑怯だからか
0609Name_Not_Found
垢版 |
2018/02/24(土) 15:22:20.69ID:???
わかった。今回の話はdata-*属性を使ったほうが
シンプルにできる。

で？
0610Name_Not_Found
垢版 |
2018/02/24(土) 15:24:55.49ID:???
で？と言われてもな

今回はdata-*属性を使ったほうがシンプルにできるから
data-*属性を使いましょう。とかしか
何が聞きたいの？
0611Name_Not_Found
垢版 |
2018/02/24(土) 15:42:42.97ID:???
599です

>>600
>今回の話にremoveClass()が必要か？という話を先に決めないといけない
ごもっとも

>>602,603
removeClass()でいいかな、わかりやすいし
0612Name_Not_Found
垢版 |
2018/02/24(土) 16:16:39.83ID:???
data-*属性を使おうっていう話は
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ

いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる
0613Name_Not_Found
垢版 |
2018/02/24(土) 16:19:53.90ID:???
そういやremoveAttr()ってのもあったな
スペース区切りで同時に複数の属性を消せるようだ
0614Name_Not_Found
垢版 |
2018/02/24(土) 16:23:35.66ID:???
そうか一個しか存在しないclass属性は一つの属性に複数入れるために
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな
0615Name_Not_Found
垢版 |
2018/02/24(土) 19:05:36.43ID:???
>>612
それだと
> 変更の度にそこも付け加えなくてはならなくて
と変わらないぞ
0616Name_Not_Found
垢版 |
2018/02/24(土) 19:24:05.19ID:???
>>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と??に影響をあたえること無く消したいものだけを消せる
0617Name_Not_Found
垢版 |
2018/02/24(土) 19:30:56.75ID:???
もうキチガイdata君の相手するなよ
0618Name_Not_Found
垢版 |
2018/02/24(土) 19:32:27.47ID:???
そうそう勝ち目ないんだからｗ
0619Name_Not_Found
垢版 |
2018/02/24(土) 20:18:35.43ID:???
>>613
引数なしはないので代わりにはならない
0620Name_Not_Found
垢版 |
2018/02/24(土) 20:19:36.85ID:???
>>616
逆に言うとライブラリの想定外のものが消せない
0621Name_Not_Found
垢版 |
2018/02/24(土) 21:04:34.07ID:???
>>461
> 次のスレタイ＝マウント取りたくてウズウズしているスレ

data君がマウント取りたくてウズウズしているスレ
0622Name_Not_Found
垢版 |
2018/02/24(土) 21:24:59.31ID:???
お世話になります。
【使用しているJquery：ScrollMagic】
質問内容：setpinで要素固定、reverse:falseで固定を１度のみで指示
　　　　　最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか

よろしくお願いします。
0623Name_Not_Found
垢版 |
2018/02/24(土) 22:01:05.12ID:???
>>619
今回の話に関係ない

>>620
今回の話に関係ない

>>621
それ言ってるのお前だけだぞｗ

>>622
ここはjQueryのスレなのでjQueryに関係ないものは対象外
0624Name_Not_Found
垢版 |
2018/02/24(土) 22:47:46.35ID:???
いや613＞619は関係あるだろｗ
0625Name_Not_Found
垢版 |
2018/02/24(土) 22:59:29.84ID:???
>>624
はぁ～、本当に説明しないと分からんのか

removeClass()の引数なしっていうのは、
削除するクラスを一つ一つ書くのが面倒だから
全部消すためにそうしてるんだよ

それをdata-name属性にうつしたのなら
全部消すのはremoveAtrr('data-name')か、
atrr('data-name', '')で終わりだろうが

なんでremoveAttrの引数なしが関係するんだ馬鹿か
0626Name_Not_Found
垢版 |
2018/02/25(日) 05:31:41.58ID:???
data君は、そもそもclass属性の存在自体が不要と言いたいのか？
基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
dataはその要素固有の状態を表す自由に命名できる属性として
住み分けされてると思うんだけどな

なんかdata君の話聞いてたらそもそもdataをdatasetではなく
単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
なんか残念だよね
0627Name_Not_Found
垢版 |
2018/02/25(日) 05:38:31.15ID:???
つうか>>616の用途ならそれこそMap使ったほうが良くね
data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
0628Name_Not_Found
垢版 |
2018/02/25(日) 08:32:49.79ID:???
map使え派は全くサンプルコードを示さない。class派もdata派も出してるのに
0629Name_Not_Found
垢版 |
2018/02/25(日) 09:09:45.23ID:???
>>616
> data-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ？ｗ
$(name).attr('class', name); これで解決

また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない
0630Name_Not_Found
垢版 |
2018/02/25(日) 12:02:00.86ID:???
>>626
> data君は、そもそもclass属性の存在自体が不要と言いたいのか？

そんなこと言ってない。今回の話では、今回の話では、（二度ｒｙ
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話
0631Name_Not_Found
垢版 |
2018/02/25(日) 12:04:02.89ID:???
>>626
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。

だから、今回の話では、今回の話では、（二度ｒｙ
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる
0632Name_Not_Found
垢版 |
2018/02/25(日) 12:05:51.22ID:???
>>627
> つうか>>616の用途ならそれこそMap使ったほうが良くね

Mapを使うとclass属性と同じように使うことが不可能になる
class属性の代わりの案なのだから、class属性でできることが
できなくなる方法はだめ

Mapで何が不可能になるかはすでに何度も言ってるが、
CSSでスタイルを適用できなくなる
0633Name_Not_Found
垢版 |
2018/02/25(日) 12:07:59.86ID:???
>>627
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ

もともとclassを使っても衝突の可能性がある。

あんたがclass属性などは衝突が有るものは全て使うなと
言いたいのなら、はっきりそう言え
class属性などは使うなとはっきりいえ

「衝突の可能性がある」は事実では有るが問題点ではない
0634Name_Not_Found
垢版 |
2018/02/25(日) 12:10:07.89ID:???
>>629
> それはただキミの想定でのお話だろ？ｗ

>>143で書いている
> 最初つけるclassは1,2個と少ないので楽かなと

最初につけるクラスは1個の場合もあるし、2個の場合もある
そして問題が解決したわけではなく、楽と書いていることからもわかるように
これもいやだけど少ないのでまだ楽だろうという話
0635Name_Not_Found
垢版 |
2018/02/25(日) 12:11:28.81ID:???
>>629
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーｗｗｗｗ

class="aaa bbb" の bbbの内容をcssで書き換えて
今度はbbbを消す代わりに、cssをもとに戻すのかよｗｗｗ

思いつきで語るな
0636Name_Not_Found
垢版 |
2018/02/25(日) 12:32:33.49ID:???
>>635
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上
0637Name_Not_Found
垢版 |
2018/02/25(日) 13:05:55.45ID:???
> $('.aaa').removeClass().addClass('aaa');
$('.aaa').attr('class', 'aaa');　// 最小限に明確な意図する結果にする
これが最良
0638Name_Not_Found
垢版 |
2018/02/25(日) 13:38:57.87ID:???
>>636
> 無意味な値のないカスタム属性をくっつけているよりスマートだし、
だから理由かけや
説得力皆無だ
0639Name_Not_Found
垢版 |
2018/02/25(日) 13:39:25.84ID:???
>636
> この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む

bbb, ccc, ddd のどこが視覚的な意味合い？
0640Name_Not_Found
垢版 |
2018/02/25(日) 13:40:51.88ID:???
>>636
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい

その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが？ｗ
class属性も含めて
0641Name_Not_Found
垢版 |
2018/02/25(日) 13:41:56.53ID:???
>>637
それだと.aaaの他に消してはならない.hogeが追加された時
結局ソースコードに修正が必要になります。
0643Name_Not_Found
垢版 |
2018/02/25(日) 14:33:18.98ID:???
注意 >>637はすでに反論があって
その反論からは逃げています
0644Name_Not_Found
垢版 |
2018/02/25(日) 16:12:42.36ID:92jxcUMI
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>
0645Name_Not_Found
垢版 |
2018/02/25(日) 16:22:13.07ID:???
別スレにこの間書いた

値からテーブルを作るコードはデータの部分を除いてたったの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);
0646Name_Not_Found
垢版 |
2018/02/25(日) 18:44:14.42ID:???
>>625
変更追加の度にnameを書き換えなくてはならないのでダメです
0647Name_Not_Found
垢版 |
2018/02/25(日) 18:56:41.42ID:???
>>633
classっていうのは共有のもので皆が追加していくもんだ
きちんとスペースで区切って使うというコンセンサスがあり衝突はしない
一方data-*はだれがどう使うか分からない
0648Name_Not_Found
垢版 |
2018/02/25(日) 21:39:54.90ID:???
removeClass()って何気に便利だな
値関係なくとりあえず全部消してくれる
0649Name_Not_Found
垢版 |
2018/02/25(日) 21:54:32.19ID:???
この間classで衝突したけどなぁ？
どうやれば衝突しないん？
0652Name_Not_Found
垢版 |
2018/02/26(月) 01:16:06.13ID:???
まだdataかclassかweakmapかって話してたのかｗ
0654644
垢版 |
2018/02/26(月) 22:29:55.06ID:dfwTNzHm
>>645
初学者なのでeachでゴリゴリ回す発想しかありませんでしたが
そのような書き方が出来るのですね

参考になります
ありがとうございます
0655Name_Not_Found
垢版 |
2018/02/27(火) 05:15:02.83ID:???
アロー関数を使えばもっと減らせる
と書きつつあえて使わないのはなんなの？
そっちのほうが分かりやすいと思ってんの？
0656Name_Not_Found
垢版 |
2018/02/28(水) 20:38:44.11ID:???
<要素 class="bbb eee fff jjj">と、
要素に値（class）を持たせ、値は動的に変化します
この要素は今どの値を持っているかはclassNameで簡単に取得できますが
classを使わずdata-*で持たせた場合はどう取得するのでしょうか？
アロー関数無しでお願いします
0657Name_Not_Found
垢版 |
2018/02/28(水) 21:12:38.18ID:???
>>656
穿った見方をすれば、これまでの話の対抗策として書いた感じがするが、
要件が違うから、"今回の場合"は classを使ったほうが良いよと
"この間の例"では、data-*属性を勧めていた俺が答えるｗ
0659Name_Not_Found
垢版 |
2018/02/28(水) 21:32:51.52ID:???
いやいや、『この間の例』は要件や目的がはっきりしてないんだから
結局何が最適かは分かりませんと言うことがFAでしょ
だからこういう場合には、とか一般的にはとか話が広がってたのに
その中で大口叩いておいて細かいことに逃げるのは感心しないな
いくら屁理屈こねようとも、周りの人へ感覚的にどう思わせたかってことが大事だからね
0661Name_Not_Found
垢版 |
2018/02/28(水) 22:11:56.25ID:???
>>659は自分の書いた内容を自分で見たほうが良い。
おまえはその書いた内容の話をしたいのかと
0663Name_Not_Found
垢版 |
2018/02/28(水) 22:56:10.68ID:???
>>659
>結局何が最適かは分かりませんと言うことがFAでしょ
>だからこういう場合には

この辺りはもっともだし、よくわかるが後半よくわからん
0664Name_Not_Found
垢版 |
2018/02/28(水) 23:05:48.96ID:???
DOM に状態を持たせるな！
DOM に状態を問い合わせるな！

React を使え！
0665Name_Not_Found
垢版 |
2018/03/01(木) 06:21:39.44ID:???
状態が要素の外側の見た目振る舞いに関わるものならclassで良い
例えば一度クリックされたボタンに永続効果をつけるためのクラス「clicked」とか

そして中身の内容にしか関わらないものであればdata-*が良い
商品を読み込んでDOMに書き出すスクリプトと
商品を絞り込むスクリプトが独立してあった場合
その間でやり取りするために使う商品の種類情報など

ただ特にスクリプトから要素を検索しないといけない場合はそれなりのコストがかかるので、
そういうスクリプトを統合して、状態をスクリプト中に持たせたほうがスッキリする場合もある
0666Name_Not_Found
垢版 |
2018/03/01(木) 09:50:45.53ID:???
なんか見た目を変えるものはclassを思ってるかもしれないけど
属性セレクタが作られたのは、属性で見た目を変えられるようにするためだからね

属性セレクタをには必要とされる機能が追加されている
前方一致、後方一致、そしてclassのようにスペース区切りで
単語が含まれているかどうか、等がある
0667Name_Not_Found
垢版 |
2018/03/01(木) 19:46:29.87ID:???
classは名前の通り分類分けのもの
様々な要素に共通する分類を指定する際にはclass
属性はただその要素固有の性質
0668Name_Not_Found
垢版 |
2018/03/01(木) 20:41:34.95ID:???
限られた情報の中で答えるのはそうするしかない上にありがたいが
木だけ見て森全体がわかったように断定してたのはちょっと引くわな
0669Name_Not_Found
垢版 |
2018/03/01(木) 20:54:47.18ID:???
属性やめてjs側に持っていくべきとか意味不明だったよなｗ
0670Name_Not_Found
垢版 |
2018/03/01(木) 20:55:56.93ID:???
mapくんのことかｗ
結局コードも示さないし
0671Name_Not_Found
垢版 |
2018/03/01(木) 22:22:20.37ID:???
いや、実際Mapは有用だと思う
>>665の真ん中の例だと
最初から商品情報がHTMLとして存在している場合は
DOMに書き加えるという機能とDOMの情報を編集するという機能に分割するほうが良さげだが
そうでない場合はDOMはただのViewと捉えてModelはJS側で持っておくほうが良さげ
0673Name_Not_Found
垢版 |
2018/03/02(金) 00:04:34.95ID:???
誰がどう読んでもdata君のことなのに無理やりmap君とか見苦しいったら
0674Name_Not_Found
垢版 |
2018/03/02(金) 00:54:00.08ID:???
は？いたじゃんweak mapくん
0676Name_Not_Found
垢版 |
2018/03/02(金) 08:31:53.51ID:???
dataでも、classでもHTMLとしては意味はないが、
data属性を使う場合はdataメソッドの取り扱いには注意が必要
動的に追加、削除、変更する場合に
$(Elements).data('hoge') で値を参照するとキャッシュされるで動的変更の値は参照できない
$(Elements).attr('data-hoge') では問題はないけどね
あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明
0677Name_Not_Found
垢版 |
2018/03/02(金) 10:36:55.86ID:???
>>676
それ以前に、dataメソッドでは
data属性を変えることはできないよ

data属性を変える必要が無いなら、dateメソッドで十分だし
書き換える必要があるなら、attrメソッドを使えと言うだけの話

> あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明
その結論はおかしい。なぜならdata属性の読み書きにはattrメソッドを使う
その場合注意する点は何もないわけで、もっというのならDOM APIを使うならば
dataメソッドがdata属性を書き換えるものではないなどという混乱はおきない

つまり、あんたのレスの最後の行はその行以前の話とは全く関係なく
取ってつけたように出てきてる。

カスタム属性を使うかの基準は動的かどうかではなくclassという名前の
属性に入れるのがふさわしいか、別の名前の属性に入れたほうが良いかの違いでしょ？

例えばariaのrole属性だって、classにaria-role-button なんて名前で入れることだって
できただろうけど、そんなことせずにrole属性を作りましょうとなったわけだ
classとは違った別の目的が有るのならclassを使わずに、カスタム属性を使いましょう
そのために汎用にいくつでも自由に属性を作って良いことになったわけなんだから
0678Name_Not_Found
垢版 |
2018/03/02(金) 10:48:34.51ID:???
jQueryにもdatasetメソッドを作れば良いのかも
0679Name_Not_Found
垢版 |
2018/03/02(金) 10:49:52.08ID:???
あ、DOM APIのDataset APIは読み取り専用だったｗ
0682Name_Not_Found
垢版 |
2018/03/02(金) 15:40:06.93ID:???
嫌いなやつを追い出すには、徹底的に反論して論破するのと
無視するのと煽るのどれが一番効果的だろうか？
0683Name_Not_Found
垢版 |
2018/03/02(金) 19:14:17.50ID:???
>>682
楽しいのは煽りだね どんどん無知さらして笑われてるのに本人は気付かないからな
徹底的に反論はアホには反論自体が理解できないから意味ない
追い出したいだけなら無視が一番だけど
0684682
垢版 |
2018/03/02(金) 19:22:15.21ID:???
聞いたかい？俺がdata君なわけだけど、本当に荒らしを
しているのは誰かよくわかっただろ？
0685Name_Not_Found
垢版 |
2018/03/02(金) 20:23:16.55ID:???
>>675
WeakMapくんは俺だが自演なんかしてないよ
0687Name_Not_Found
垢版 |
2018/03/03(土) 03:27:30.33ID:???
何も意見を言わずに支持を表明する理由は、
ほら支持してる人がいるだろ？と見せるのが目的だって死んだじいちゃんが言ってた。
名前を隠して言うことで沢山の人に支持されてるように見せられるんだって
0688Name_Not_Found
垢版 |
2018/03/03(土) 08:37:12.07ID:???
>>687
それ煽りだけ入れる人、意見を言わずに否定だけする人も同じだよ
0689Name_Not_Found
垢版 |
2018/03/03(土) 08:47:02.97ID:???
要素の私物化は良くない
0690Name_Not_Found
垢版 |
2018/03/03(土) 11:56:37.00ID:???
>>687
匿名掲示板でそんなこと言ってもだから何としか
ちなみに674は明らかに言わんとしてることに対してずれてるぞ
0692Name_Not_Found
垢版 |
2018/03/03(土) 14:22:25.03ID:???
もうdata-属性は自分で勝手に定義しちゃダメとか言い出しそうな勢いだなｗ
0693Name_Not_Found
垢版 |
2018/03/03(土) 19:22:02.38ID:???
>>664
jQuery(js)はそれなりに使ってるがReactだとその件に関してどういうメリットあるの？
0694Name_Not_Found
垢版 |
2018/03/04(日) 15:41:29.70ID:???
jQuery → DOM
React → 仮想DOM → DOM

React では、DOMを更新しない場合に、React内の仮想DOMに問い合わせるだけ。
DOMにアクセスしない

React内に、DOMのコピーを持ってる

状態を問い合わせるだけとか、DOMを更新しない場合に、
ブラウザにアクセスしないから速い
0696Name_Not_Found
垢版 |
2018/03/04(日) 17:04:25.98ID:???
>>694
それって単に変数に問い合わせたいものの
情報を持たせればいいだけだよね？
0697Name_Not_Found
垢版 |
2018/03/04(日) 17:34:32.76ID:???
>>694
状態を問い合わせるだけとか、DOMを更新しない場合に、
レンダリングされないのでDOMにアクセスしても速いよ
0698Name_Not_Found
垢版 |
2018/03/04(日) 17:36:44.93ID:???
>>696
それだけじゃあんまり意味なくて、効率的な差分更新アルゴリズムが事実上必須。
0699Name_Not_Found
垢版 |
2018/03/04(日) 17:39:36.85ID:???
>>698
マッチポンプって感じだよねｗ

やらなくてもいいのに仮想DOMとかいう無駄な仕組みを追加して、
仮想DOMという仕組みのせいで遅くなっちゃった、
だから遅くならないように差分更新アルゴリズムを作らなきゃ！ｗ

最初から仮想DOMなんてものがなければシンプルで
無駄のない処理を書くことができるのに。

やっぱり馬鹿対策なのかな？
馬鹿が無駄なコードを書いてもなるべく遅くならないように
する防御策が仮想DOMｗ
0700Name_Not_Found
垢版 |
2018/03/04(日) 17:50:38.90ID:???
>>699
> 馬鹿が無駄なコードを書いてもなるべく遅くならないようにする防御策が仮想DOMｗ

いやこれマジこの通りだよ。
現在のDOMがどうなってるか気にしないで書けるんだから。
天才が常にありうるすべての場合のDOMの状態を把握して狙い澄ました最小限のDOM変更コードを書けるならそっちのほうが速い。
ところがいかな大企業と言えど天才のみでチームを組めないし、ライフサイクルの最後までそいつらをそのプロジェクトに縛り付けることも出来ない。

カップ麺スゲーと言ってるところにラーメン屋のラーメンには敵わないだろｗと言ってるようなもん。
0701Name_Not_Found
垢版 |
2018/03/04(日) 18:07:24.06ID:???
>>700
天才は現在のDOMを意識なんかしてねーよ
その時点でずれてるんだな。

天才っていうほどでもないが普通は
DOMが変化しても柔軟に対応できるように作る

idやclassや属性を使うことで、実際のDOMが
変わったとしてもコードはそのままで動くようにする

それは作業分担にもつながる。DOM（HTML）を書くのは
ほかの人に任せることができる。同様にCSSもだな
仮想DOMを使うとプログラマがHTML相当のものを書かなければいけなくなる。

自分の担当の部分に集中できる仕組みにするのが常識だと思ってる俺に
なに？天才はありとあらゆることを把握してる？ アホかｗ
前提が間違ってるんだわ。

あらゆることを把握するのが無理だから仮想DOMが必要だって思ってるようだが
こっちはあらゆることを把握しなくていいから仮想DOMは不要だって言ってるんだよ
0702Name_Not_Found
垢版 |
2018/03/04(日) 19:11:41.98ID:???
> idやclassや属性を使うことで、実際のDOMが変わったとしてもコードはそのままで動くようにする

そうなってないコード山ほどあるよね？
理由は出来ないやつ気にもしないやつがたくさんいるから。
0703Name_Not_Found
垢版 |
2018/03/04(日) 19:21:32.21ID:???
できないやつは何を使ってもできないだろ
人間の問題は技術の話の対象外だ
0704Name_Not_Found
垢版 |
2018/03/04(日) 19:28:50.13ID:???
程度と言うものがあるだろ。
DOM直接操作に比べて仮想dom使ってるライブラリは簡単だよ。
だって宣言的に書くだけで操作しなくていいんだもの。
diffしてパッチ作って実domに反映はライブラリがやってくれる。
だからバカにウケてる。
カップ麺が低所得者層にウケるのと同じ。
0705Name_Not_Found
垢版 |
2018/03/04(日) 19:33:28.74ID:???
それを言うならHTMLを書くだけで
画面にレンダリングされるが？
プログラム一切不要
0706Name_Not_Found
垢版 |
2018/03/04(日) 22:16:01.01ID:???
Reactの良さはDOMからセマンティクスやなんやかんや
とにかくレンダリングに必須でない部分を削ぎ落としたスマートな仮想DOMを提供してくれることで
もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる
0708Name_Not_Found
垢版 |
2018/03/04(日) 23:50:30.12ID:???
> もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる

俺に言わせれば、それらが、世界に多数存在するウェブサイトに
どう適用できるの？って感じだけどな

Reactは完全にオーバースペックなんだわ
0709Name_Not_Found
垢版 |
2018/03/05(月) 06:12:30.65ID:???
>>708
そもそも既存のWebサイトに適応するようなものではないということ
出発点が違うからオーバースペックとかいう話にはならない
0710Name_Not_Found
垢版 |
2018/03/05(月) 06:23:59.61ID:???
嫁さんがちゃんとご飯作ってくれてるのにわざわざカップ麺買ってきていつ食べるか悩んでるようなもの。
でも独身には人気。そういうこと。
0711Name_Not_Found
垢版 |
2018/03/05(月) 10:58:56.75ID:???
よく分からんけど、画面側とか作ってくれる人が別にいるのに
自分一人で画面も何もかも作っていた人にとっては
Reactは便利ってことかな？
0713Name_Not_Found
垢版 |
2018/03/06(火) 06:17:18.60ID:???
俺の嫁さんは２日に１回は平気でインスタントを晩飯として食わせるぞ
0714Name_Not_Found
垢版 |
2018/03/11(日) 14:59:35.65ID:???
じゃあこっちに書けクズ
0715Name_Not_Found
垢版 |
2018/03/11(日) 15:24:46.58ID:???
クズじゃないのでこっちにもかかない
0716Name_Not_Found
垢版 |
2018/03/11(日) 19:21:20.43ID:???
jQueryがHTMLエスケープ用のメソッドを用意していない理由は何ですか？
あほなのでしょうか？
0718Name_Not_Found
垢版 |
2018/03/11(日) 19:37:41.24ID:???
>>717
textってHTMLエスケープされるんですね
というか当然ですね・・
半角スペースが&nbsp;に置き換わらないのでしないのかと勘違いしましたが
スペースはHTMLエスケープに含まれなかったです
0719Name_Not_Found
垢版 |
2018/03/11(日) 23:09:57.01ID:???
半角スペースとnbspは別物だからな
nbspは何の略かしってるか？ non-breaking space、自動改行しないスペースだ
半角スペース（英単語の区切り）では一行に収まらなければ改行するが
nbspだと自動改行しない。別物だ。エスケープじゃねぇ
0720Name_Not_Found
垢版 |
2018/03/12(月) 11:47:43.57ID:???
>>719
まさに望まない場所で改行されることに困って置換したのですが
「自動改行しないスペース」の意味だとは気づきませんでした
ありがとうございました
0721Name_Not_Found
垢版 |
2018/03/12(月) 20:19:37.73ID:???
blurイベントはデレゲートできませんでした
おそらくバブリングしないからだと思います
バブリングしないイベントは全てデレゲートできないと考えていいのでしょうか？
0722Name_Not_Found
垢版 |
2018/03/12(月) 20:32:38.91ID:???
特定のページにアクセすしたときに
<div class="contents">
...
</div>
の中だけ表示ってできますか？

特定の要素だけ非表示ってのはできるみたいなんですけど
0723Name_Not_Found
垢版 |
2018/03/12(月) 21:59:29.44ID:5xRKXtw6
質問です。
target属性が指定されていないaタグ　を選択するにはどのように書けばよろしいでしょうか？
0724Name_Not_Found
垢版 |
2018/03/12(月) 22:04:24.19ID:5xRKXtw6
age忘れました
0725Name_Not_Found
垢版 |
2018/03/12(月) 22:15:01.54ID:???
a:not(:target) じゃねぇの？ jQueryというよりセレクタの話
0727726
垢版 |
2018/03/12(月) 22:31:25.19ID:???
すいません解決しました
a:not([target])
でした
0728Name_Not_Found
垢版 |
2018/03/12(月) 22:36:25.04ID:???
:targetなんていう疑似クラスあったのかと思ってしまった
0732Name_Not_Found
垢版 |
2018/03/13(火) 00:38:30.87ID:???
722ですけどスタイルを変更できるのはしってるんですけど
visibleをnoneにするのは簡単でもきりとるのはそれ以外の全部けさないとだし
ターゲットの親は残さないといけないしで簡単にやる方法ってないのかなと…
0733Name_Not_Found
垢版 |
2018/03/13(火) 01:45:26.66ID:???
すっかりアロー関数式を使うようになっていたのですが
jQueryはメソッドの中でthisを使うことが多いので
アロー関数式だと問題が出ます
普通の関数を書くしかないのでしょうか？
0734Name_Not_Found
垢版 |
2018/03/13(火) 01:56:14.63ID:???
コールバックにthisで渡される変数は引数でも渡されているので
こっちを使うのがES6風なのでしょうか？
0735Name_Not_Found
垢版 |
2018/03/13(火) 04:44:46.30ID:???
なんでもかんでもアロー関数を使うのが間違いだと思うけどね
addEventListenerでも同じ問題が有るけど
そういう風にthisが変わるようなときには使わないほうが良いと思う

誰か知らないけど（ｗ）この人も同じようなことを言ってる
https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
> 2. Callback functions with dynamic context

個人的にはアロー関数は、関数を値のように使いたいときだけにしてほしい
それは大抵一行で済むものになるので () => { return n } みたいな
{} とreturnを使う構文は無くしてほしいね
0736Name_Not_Found
垢版 |
2018/03/13(火) 06:09:48.14ID:???
thisじゃなくて引数を使えばいいじゃん
0737Name_Not_Found
垢版 |
2018/03/13(火) 11:25:29.28ID:???
オブジェクト指向的にthisを使うためにアロー関数を使うわけで、
イベントハンドラではtargetを使うのが普通だと思う
0739Name_Not_Found
垢版 |
2018/03/13(火) 12:21:45.32ID:???
>>738
その文書の"thisを束縛しない"の項目に、
＞これは、オブジェクト指向プログラミングをする上で煩わしいということが分かりました。
って書いてあるよ
0741Name_Not_Found
垢版 |
2018/03/13(火) 12:29:08.64ID:???
そういや関数型に使うんならそもそもthis使わないし短く書けるくらいしか使用上の違いなかったな
0742Name_Not_Found
垢版 |
2018/03/13(火) 13:04:12.92ID:???
別にアロー関数がオブジェクト指向に向いてるというわけでもそうでないわけでもない
アロー関数はメソッド自体として使うには確かに不適切
だがメソッド中で関数を定義したりすると必要になるthat=thisなんかは不要になる
適材適所
0743Name_Not_Found
垢版 |
2018/03/16(金) 16:48:09.09ID:???
jsbinで追加出来るjQueryのバージョンに
jQuery WIP
という版があるのですが、このWIPとは何の略でしょうか？
0745Name_Not_Found
垢版 |
2018/03/16(金) 18:32:41.85ID:???
>>744
作成中というような意味ですね
とすると、新しいほどいいだろうと思って選んでいましたが
あまり使わない方がいいのでしょうね
ありがとうございました
0746Name_Not_Found
垢版 |
2018/03/16(金) 18:44:58.65ID:???
どんどん使うべきだよ
万が一問題があってもそれを報告すればいいだけだし
自分のスキル向上にもなる
良いことしか無い
0748Name_Not_Found
垢版 |
2018/03/16(金) 22:35:42.72ID:???
removeの範囲にdataを持った要素があった場合、
そのdataも解放されるのでしょうか？
0749Name_Not_Found
垢版 |
2018/03/17(土) 06:45:29.19ID:???
そこまで気になるようになったのなら自分でソース見て調べたほうが良い
0750Name_Not_Found
垢版 |
2018/03/17(土) 07:50:46.93ID:???
もし、そのdata が、削除されないオブジェクトから、参照されていれば、
必要だから、dataはガベージ(GC)されない

生きているオブジェクトからの、参照カウントが1以上あるから

メモリリークするかどうか、チェックすべし
0751Name_Not_Found
垢版 |
2018/03/17(土) 13:13:33.33ID:???
参照がなければGCされるということですか？
逆に言うとdataが含まれた要素をjQuery外から削除してしまったら
メモリリークになるということでしょうか。
危険ですね？
0752Name_Not_Found
垢版 |
2018/03/17(土) 14:45:55.96ID:???
だからjQueryを使いましょうという話になる
0753Name_Not_Found
垢版 |
2018/03/17(土) 16:59:54.84ID:???
麻薬の禁断症状は麻薬を使い続ればいいからな。理にかなっている
0754Name_Not_Found
垢版 |
2018/03/17(土) 22:50:19.57ID:???
>>752はイかれてるんじゃないかと正直思う
メモリリークなんて普段から怖がってかかるものじゃない
プロジェクトを進めてきて一段落する度にちょっと確認してみるだけ
それで意図しないメモリの増加があればメモリリークが起きてるのかなとなる

そのときにプロファイルをとって調べればいい
ただしjQueryのようなライブラリを使ってると調査の難易度が格段に増す
0755Name_Not_Found
垢版 |
2018/03/17(土) 23:32:43.66ID:???
Backbone.js は、DOM を削除した際に、そのDOMの子孫に、
イベントハンドラーがあっても削除されないから、メモリリークになるけど、

jQuery では、そういうイベントハンドラーも、自動的にすべて削除するから、
メモリリークにならないとか、何かで読んだ

まあ、jQueryをデバッグ実行して、確かめて下さい
0756Name_Not_Found
垢版 |
2018/03/17(土) 23:46:30.59ID:???
>>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'});
})
0757Name_Not_Found
垢版 |
2018/03/18(日) 02:15:40.69ID:???
replaceWithでも当然
dataやイベントリスナ―の処置はしてくれますよね？
0758Name_Not_Found
垢版 |
2018/03/18(日) 02:26:48.80ID:???
>>757
はい。jQueryを使っている限りメモリリークはしません
0759Name_Not_Found
垢版 |
2018/03/18(日) 02:30:37.05ID:???
>>758
jQueryは神なんですね
ありがとうございました
0760Name_Not_Found
垢版 |
2018/03/18(日) 02:40:33.74ID:???
神ではありません。素晴らしいライブラリです。
0761Name_Not_Found
垢版 |
2018/03/18(日) 02:43:34.27ID:???
なるほど。確かに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() を使うなら、まぁ問題無いです。
0762Name_Not_Found
垢版 |
2018/03/18(日) 10:20:46.03ID:???
cleanDataなんていう裏メソッドがあったのですね
ありがとうございます
0763Name_Not_Found
垢版 |
2018/03/18(日) 10:59:36.97ID:???
>>756
callback の中で event.currentTarget で要素を取得するように書けば
循環参照にならないのでメモリリークは防げることになるよね
0764Name_Not_Found
垢版 |
2018/03/18(日) 12:10:43.86ID:???
連続している複数の要素をひとかたまりのjQueryオブジェクトにすることって出来ますか？
それに対してreplaceWithして、その部分をごっそり入れ替えたいのです
全てがある要素の子要素なら出来ると思いますが
そういうコンテナを設置せずにやりたいです
0765Name_Not_Found
垢版 |
2018/03/18(日) 12:42:57.16ID:???
>>764
複数の要素を一塊にするのが、jQueryオブジェクトの本質みたいなものだから
連続してようがしてまいが一塊にできる。

だけど連続してない場合に「どこと」入れ替えたいのかが区別つかない
あなたは連続していることだけを想定しているから、どこと入れ替えても同じ結果になるので
気にしていないかもしれないけど、jQueryは連続して無くても扱えるものなので
それを考慮しなければいけない

で、どうするかだけど、連続する複数の要素のうち
最初の要素を入れ替え対象とし、その後の要素は消してしまえばいい
（実際には処理する順番は逆にすることになるだろうけど）

$('li + li').remove();
$('li').replaceWith('<li>a</li>');

これが単純でわかりやすいと思うけど、頑張れば
メソッドチェーンで一行で書けるかもね
0766Name_Not_Found
垢版 |
2018/03/18(日) 13:26:56.91ID:???
>>765
なるほど～
先頭一つを残して削除するなんて思いつきませんでした
ありがとうございます
0767Name_Not_Found
垢版 |
2018/03/19(月) 23:07:52.62ID:???
あとはclass付けるとかsliceとかprevAll/nextAllとか
0768Name_Not_Found
垢版 |
2018/03/25(日) 23:08:23.19ID:???
Vanilla JSでどう実装するのか解った上で
jQueryを使いたいと思うのですが
そういう人のための総括的な解説をしている
書籍を探してます。
もし知ってたら教えて下さい。
0770768
垢版 |
2018/03/26(月) 00:46:26.29ID:???
>>769
ありがとうございます。
購読検討してみます。
0771Name_Not_Found
垢版 |
2018/03/31(土) 07:44:15.57ID:???
jQueryを使って
ある要素が何番目の要素なのかを調べるにはどうすればいいですか？
0772Name_Not_Found
垢版 |
2018/03/31(土) 07:44:46.68ID:???
×何番目の要素
○何番目の子要素

でした
0774Name_Not_Found
垢版 |
2018/03/31(土) 12:39:49.51ID:???
あとセレクタのnth-childとかnth-of-typeが使えるかもね
0776Name_Not_Found
垢版 |
2018/03/31(土) 13:14:38.16ID:???
>>773
ありがとうございます
出来ました
要素自体が属性として持っているんじゃないかと思っていたのですが
配列の要素が配列のインデックスを持っていないように
DOMの要素も自分のインデックスを持っていないのでしょうね
0777Name_Not_Found
垢版 |
2018/03/31(土) 21:55:20.27ID:???
変数の状態をコンポーネントに反映するみたいなことを
jQueryでスマートにやるにはどうするのが一番いいのでしょうか？
たとえば変数の状態をドロップボックスに反映させるなど。
もちろんそういう変数を作って呼び出せば出来ますが、
なんかイケてない気がします
反映させる処理をコンポーネント自体に帰属させて呼ぶ感じにしたいです
カスタムイベントでしょうか？
0778Name_Not_Found
垢版 |
2018/03/31(土) 22:06:09.47ID:???
最近のフレームワークは
使ったことはないのでよくは知りませんが
変数とコンポーネントの紐付けもやってくれてる感じがします
似たようなことをjQueryでやるにはどうすればいいのでしょうか
0779Name_Not_Found
垢版 |
2018/03/31(土) 22:25:10.60ID:???
×そういう変数を作って
○そういう関数を作って

でした
0780Name_Not_Found
垢版 |
2018/03/31(土) 23:31:59.66ID:???
よくわからんがリテラルにすればいいのでは
0781Name_Not_Found
垢版 |
2018/04/01(日) 01:23:31.55ID:???
追加で質問です。変数とコンポーネントの紐付け
jQueryなどのJavaScriptライブラリやフレームワークを
使わない場合はどうやるのでしょうか？
その方法があるとして、jQueryにも応用できますか？
0783Name_Not_Found
垢版 |
2018/04/01(日) 02:55:03.88ID:???
>>780
リテラルとは何のことでしょうか

>>781
別人ならもっと別人らしく書いてください

>>782
ありがとうございます
読んでみます
0784Name_Not_Found
垢版 |
2018/04/01(日) 12:01:32.75ID:???
>>782の記事を読んでいますが
未知のパラダイムの洪水で混乱してきました
素直にデータバインディングライブラリの勉強した方がいいパターンですねこれは・・
0785Name_Not_Found
垢版 |
2018/04/01(日) 16:40:25.05ID:???
だからそう言ってるだろ…
でもデータバインディングライブラリはいっぱいありすぎて逆に迷うな。
ある程度高機能になったらそこまでやるならもうvuejs使えよってなっちゃうからそれよりシンプルかが判断の分かれ目か。
https://github.com/gwendall/way.js/
とかどうかね？あとrivets.jsとか…
0786Name_Not_Found
垢版 |
2018/04/01(日) 18:24:28.48ID:???
>>785
確かに単機能でシンプルな方がいいですね
見てみます
ありがとうございました
0787Name_Not_Found
垢版 |
2018/04/01(日) 22:25:26.85ID:bFR0K0RK
以下のような、横に伸びる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>

よろしくお願いします
0788Name_Not_Found
垢版 |
2018/04/02(月) 01:08:54.96ID:???
>>787
過去スレに似たような話が出たけど
なに？ コピペ？ また同じ話したいの？
0790Name_Not_Found
垢版 |
2018/04/02(月) 05:13:23.21ID:???
$('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行以上あると、誤動作するかも
0792Name_Not_Found
垢版 |
2018/04/02(月) 21:57:33.68ID:???
>>790
> <tr> が、2行以上あると、誤動作するかも
普通複数あるだろw
0793Name_Not_Found
垢版 |
2018/04/03(火) 02:20:06.50ID:???
表のヘッダーだけじゃないのか？

表のデータも、1つのセルにまとめるのか？
0795790
垢版 |
2018/04/03(火) 07:13:51.61ID:???
<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行ずつ分けて、処理すべき
0797787
垢版 |
2018/04/03(火) 12:34:02.34ID:???
>>790
動作を確認できました
超リスペクトです
ありがとうございます!

他の方が指摘している部分で問題が無いか確認しつつ、参考にさせて頂きます
0798787
垢版 |
2018/04/03(火) 12:37:32.12ID:???
>>792
自分はtrごとにclassを付けて対応しました

あくまでヘッダで使いたかったので煩くはならなかったですが、10行超えるような行で適用すると泥臭くなりそうだとは思いました
0799790
垢版 |
2018/04/03(火) 13:03:35.87ID:???
複数行にも使うの？

複数行の場合は、
>>795
の例では、2行目のB に、colspan="2" が付くから、ダメだろ

1行ごとに一旦、処理を切らないといけない

>>789
は、難解すぎて、訳がわからない
0800790
垢版 |
2018/04/03(火) 13:58:23.51ID:???
>>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();
}
})
0801Name_Not_Found
垢版 |
2018/04/03(火) 22:47:59.68ID:???
>>799
> は、難解すぎて、訳がわからない
縦横量対応 + jQueryプラグイン化してあるからねｗ

短いのであれば、こっちにあった（少しだけ変更してみた）
コードの説明はリンク先へ
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])');
0802Name_Not_Found
垢版 |
2018/04/03(火) 22:50:55.72ID:???
そういや >>789は更に最初からcolspanがある場合にも対応していたはず
0803787
垢版 |
2018/04/04(水) 07:05:08.76ID:???
色々と参考コードをありがとうございます
799さんのコードは理解が難しかったですが、改造案件ではこういうのをワンサカ見るんだろうなと思うので理解できるよう努力したいと思います
0804Name_Not_Found
垢版 |
2018/04/09(月) 12:47:31.90ID:???
何度も同じjQueryオブジェクトを使う時には
今でも一旦変数に代入した方がいいのでしょうか？
$document = $(document)
のように。
パフォーマンスから言えば代入した方がいいはずですが、
もう気にしなくていいような気もします
0806Name_Not_Found
垢版 |
2018/04/09(月) 12:58:54.00ID:???
マシンが高性能になっているので
マイクロ秒レベルのパフォーマンスの違いなんて気する時代ではないのでは？
という意味です
0807Name_Not_Found
垢版 |
2018/04/09(月) 12:59:41.42ID:???
というか1マイクロ秒の違いすらあるのか怪しいですよね・・
0808Name_Not_Found
垢版 |
2018/04/09(月) 13:06:49.49ID:???
documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ
0809Name_Not_Found
垢版 |
2018/04/09(月) 13:28:09.90ID:???
確かに引数に文字列を渡す場合はパース処理が入るので何度も実行したくはないですね
引数がDOMオブジェクトの場合は許容範囲の感じがします
場合によりけりということでしょうか
ありがとうございました
0810Name_Not_Found
垢版 |
2018/04/09(月) 14:24:00.71ID:???
みんなjqueryオブジェクトには$付き変数つかってる？
それとも気にしない派？ おれは気にしない派
0811Name_Not_Found
垢版 |
2018/04/09(月) 15:20:31.49ID:???
使ってる。
生のelementも使うから。
0812Name_Not_Found
垢版 |
2018/04/09(月) 21:25:45.70ID:???
>>808
> documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ

具体例あげられますか？
0813Name_Not_Found
垢版 |
2018/04/09(月) 23:40:41.46ID:???
そこそこの規模のDOMを用意し、CSSセレクタでパフォーマンスの観点から避けるべきと言われていること(ユニバーサルセレクタとか子孫セレクタとか一般兄弟セレクタとか)をあえてすべて踏む長めのセレクタをぶっこんでトライ！
まさか計測まで人にやらせるつもりじゃねーだろうな
0814Name_Not_Found
垢版 |
2018/04/10(火) 08:08:51.15ID:???
>>813
計測はこっちでやってやるよ
お前は黙ってセレクタを書け
0815Name_Not_Found
垢版 |
2018/04/10(火) 08:47:13.97ID:???
>>814
じゃ黙ってDOM用意しな。セレクタはDOM依存だからな。
0816Name_Not_Found
垢版 |
2018/04/10(火) 09:25:25.85ID:???
セレクタの遅さはDOM依存じゃないが？

そんなにDOM用意しろって言うなら
ほらよ。遅いセレクタ書いてみなｗ
<span>a</span>
0817Name_Not_Found
垢版 |
2018/04/10(火) 09:52:15.66ID:???
DOM依存であることを示してるように見えるのだが…
0818Name_Not_Found
垢版 |
2018/04/10(火) 10:00:04.53ID:???
>>817
オレなら >>816 のaを選択するのにたっぷり0.1秒はかかるセレクタを書くことができるッ！
しかもそいつはつい先日納品したプロジェクトで使用したばかりのやつだッ！
0820Name_Not_Found
垢版 |
2018/04/10(火) 15:08:18.86ID:QSJyPyVl
>>804
2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき

変数に入れずに、2回書いたら、その間にDOM に、
何か変化があるのかも、と思ってしまう

変化が無いなら、変数に入れた方が、わかりやすい
0821Name_Not_Found
垢版 |
2018/04/10(火) 18:12:44.89ID:???
$(event.currentTarget)
とかもわざわざ変数に入れるんですか？
0822Name_Not_Found
垢版 |
2018/04/10(火) 18:15:49.80ID:???
コールバックの中でvar $this = $(this);とか稀によく見る
0825Name_Not_Found
垢版 |
2018/04/11(水) 00:05:37.68ID:???
>>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"});
0826Name_Not_Found
垢版 |
2018/04/11(水) 00:09:38.45ID:???
この使い方も重要

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);
0827Name_Not_Found
垢版 |
2018/04/11(水) 01:20:33.44ID:???
>>825-826
ありがとうございます
知らない方法ばかりです
関数を渡してフィルタみたいな処理ができるのは良さげです
変数をなるべく使いたくないっていうのは、
関数型っぽく書きたいっていうところから来てるんですよね
0828Name_Not_Found
垢版 |
2018/04/11(水) 08:44:48.33ID:???
>>827
名前を使いたくない ってのが一番大きい理由だと思うよ

おれ自身はチョイ関数でもバンバン定義する派だけど、使いたくない理由もわかる
0829Name_Not_Found
垢版 |
2018/04/11(水) 20:35:22.78ID:???
>>820
804ではないが参考になった
以前速度差ないとのことで変数に入れずにいたが
そういうことならわかりやすくていいですね
0830Name_Not_Found
垢版 |
2018/04/11(水) 20:51:09.83ID:???
普通はそう考えるものだよ
0831Name_Not_Found
垢版 |
2018/04/11(水) 22:15:06.54ID:???
変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな
0832Name_Not_Found
垢版 |
2018/04/11(水) 22:26:30.44ID:???
>>820が変数に入れるべきと言った途端

> 2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき

↓これだよｗ

> 変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな
0834Name_Not_Found
垢版 |
2018/04/11(水) 22:38:28.88ID:???
>>820
> 変数に入れずに、2回書いたら、その間にDOM に、
> 何か変化があるのかも、と思ってしまう
>
> 変化が無いなら、変数に入れた方が、わかりやすい

どういうこと？
変数に入れた所で、変化するでしょ？

$id = $('#id')
$id.text(123);
$id.text(); // 変数に入れたのに123に変わってる

jQueryにDOM要素の状態をさせるメソッドは
たくさんあるけど、どれも変数に入れても変化するものばかり

唯一の例外はremoveしても（DOMの状態は変化しているが）
jQueryオブジェクトには参照が残ってるってことぐらい
それだけなのに"変化がないなら変数に入れたほうがわかりやすい"は大げさ
0835Name_Not_Found
垢版 |
2018/04/11(水) 23:05:45.89ID:???
変数に入れても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
0836Name_Not_Found
垢版 |
2018/04/11(水) 23:31:22.86ID:???
そりゃ再代入すりゃ変わるよ
0837Name_Not_Found
垢版 |
2018/04/12(木) 00:18:42.92ID:???
いや、再代入してないよｗ

----はただの区切り
別々の話ね。
0838Name_Not_Found
垢版 |
2018/04/12(木) 00:22:45.40ID:???
>同じjQueryオブジェクトを使う時には

とあるのに何入れ替えてるんだよｗ
0839Name_Not_Found
垢版 |
2018/04/12(木) 00:25:21.80ID:???
変数に入れても、
・DOM要素の内容は変わる
・DOMの構造も変わる
・DOM要素の参照は残ってる

って所かな？
jQueryとか関係なく

var elm = document.getElementById('id'),

って書いてるのと同じ。
ID=idをdocumentのDOMツリーからremove()しても、
elmという参照は残ったまま

逆に言えば、参照は残ったままだけど、
DOM要素への変更は反映される。jQueryでも同じ
0840Name_Not_Found
垢版 |
2018/04/12(木) 00:27:49.39ID:???
>>838
めんどくせーな。
これでお前でも理解できるだろ？
変数に入れてもDOMは変化するんだって

例1

function exp1() {
　var $ul = $('ul')
　console.log($ul.children().length) // 5
　$ul.children().remove();
　console.log($ul.children().length) // 0
}

例2

function exp2() {
　var $ul = $('ul')
　console.log($ul.children().length) // 5
　$ul.append('<li>')
　console.log($ul.children().length) // 6
}

例3

function exp3() {
　var $ul = $('ul')
　console.log($ul.parent().attr('id')); // undefined
　$('#id').append($ul)
　console.log($ul.parent().attr('id')); // id
}
0841Name_Not_Found
垢版 |
2018/04/12(木) 04:25:24.75ID:???
変数に入れておけば、異なる参照を指すことはない。
このリストが、別のリストに変わったりしない

変化する場合でも、その要素・コンテキスト以下・子孫要素しか変わらない

祖先の要素が変わって、別の要素を指すようになったりしないから、
意図がわかりやすい
0842Name_Not_Found
垢版 |
2018/04/12(木) 21:01:52.79ID:???
>>841
よく考えてほしいんだけどさ、

一行目、私は○○にデータを書き換えます。
二行目、○○にデータが書き換わった状態であってほしい

これの方が直感的だよね？
0843Name_Not_Found
垢版 |
2018/04/12(木) 21:36:58.46ID:???
>>840
そんなことは書かれる前からわかっとるわ、基本だろ
そういうことでなくて質問と>>838はDOMを変化させない前提だろうよ
パフォーマンス云々言ってるのだし
0844Name_Not_Found
垢版 |
2018/04/12(木) 22:03:57.54ID:???
だから変数に入れてもDOMは変化しますよって言ってるんだが？


変数に入れることで、どういう勘違いを
あなたはしてるのですか？っていう話
0845Name_Not_Found
垢版 |
2018/04/12(木) 22:06:27.90ID:???
順を追って説明しないと理解できてなさそう

1. DOMを変化させない前提
2. 変数に入れないと、DOMが変化するように見える
3. 変数に入れると、DOMは変化しないように見える
4. でも変数に入れても実際はDOMは変化する
5. つまり3は勘違い。変数に入れてるのをみてDOMが変化しないように見えたら、それは目が悪い。
0846Name_Not_Found
垢版 |
2018/04/12(木) 22:09:01.76ID:???
久しぶりに除いたが「変数使わないべき、それ以外認めん」の人がまた勘違いで話捻じ曲げて強引に押し通そうとしてるのか
0847Name_Not_Found
垢版 |
2018/04/12(木) 22:10:00.79ID:???
その話は知らんけど、>>845に何か物申すこと有る？
0848Name_Not_Found
垢版 |
2018/04/12(木) 22:10:05.44ID:???
おっと、覗いただな、失敬
0849Name_Not_Found
垢版 |
2018/04/12(木) 22:16:53.75ID:???
× 変数に入れずに、2回書いたら、その間にDOM に何か変化があるのかも、と思ってしまう
○ 変数に入れても、2回書いた時、その間にDOMに何か変化があることがある。


× 変数に入れるとDOMは変化しない
○ 変数に入れるとDOMを変化させてもDOM要素への参照は残っている

なんで正しい説明ができないんだろう？
0850Name_Not_Found
垢版 |
2018/04/12(木) 22:18:43.59ID:???
>>844
問題文をもう一度読もうか
先ずはそこからだ
0851Name_Not_Found
垢版 |
2018/04/12(木) 22:19:13.72ID:???
そして、これを踏まえて説明すると、
jQueryではメソッドチェーンでつなぐことで
変数に入れなくても、変数に入れたのと同じ状態を作ることができる。
0852Name_Not_Found
垢版 |
2018/04/12(木) 22:20:23.39ID:???
>>850

問題文ってこれ？

> 804 名前：Name_Not_Found[sage] 投稿日：2018/04/09(月) 12:47:31.90 ID:???
> 何度も同じjQueryオブジェクトを使う時には
> 今でも一旦変数に代入した方がいいのでしょうか？
> $document = $(document)
> のように。
> パフォーマンスから言えば代入した方がいいはずですが、
> もう気にしなくていいような気もします


じゃああんたはその次のレスを読もうか？
そのレスが間違ってるって話をしてるんだから
0853Name_Not_Found
垢版 |
2018/04/12(木) 22:23:57.47ID:???
変数に入れたらDOMに変化がないと思うだろ！

いや、思わんね（笑）

これだけの話
0854Name_Not_Found
垢版 |
2018/04/12(木) 22:32:40.68ID:???
ちなみの最初の話をすると

$document = $(document)
変数に代入しなくても、document変数に参照が残ってる。

$element = $(this)
変数に代入しなくても、this変数に参照が残ってる

element = document.getElementById('id')
$element = $(element)
変数に代入しなくても、element変数に参照が残ってる


わけで、毎回 $(documet)、$(this)、$(element) を実行しても
（DOMではなく参照が）変わらないことは保証される
0855Name_Not_Found
垢版 |
2018/04/13(金) 05:44:33.82ID:???
一般的にイベントのデレゲーションは負荷軽減に繋がると言われていますが
$(document).on('click','.hoge a',fn)
のようにセレクタで指定している場合、
クリックのたびにイベントが起きた要素がセレクタと一致するかを調べるので
結構負荷が高くなるのではないかと思いました
$('.hoge a').on('click',fn)
のように要素に直接リスナを登録した場合、セレクタの解釈はリスナの登録時だけなので、負荷は小さくなるのでは？
ただデレゲーションの場合、リスナ登録時に存在しないDOMのイベントも捕捉できるという意味もあるので
簡単に置き換えることはできませんが
0856Name_Not_Found
垢版 |
2018/04/13(金) 08:15:14.19ID:???
表に、100セルがある場合、
各セルに、イベントハンドラーを付けると、100個になる

これらの処理が似ている場合には、
表に、1つのイベントハンドラーだけを付けて、
各セルの座標値を、計算した方がよい
0858Name_Not_Found
垢版 |
2018/04/13(金) 20:56:56.13ID:???
>>855
負荷とひとまとめにしてるけど、
典型的な速度を取るかメモリを取るか問題やね

デレゲーションを使うと、
1. イベントハンドラの設定が1回ですむ（速い）
2. イベントハンドラが一つで済む（メモリ少ない）
3. イベント発生ごとに発生した要素のチェックが必要（遅い）
4. 要素を増やしてもイベントハンドラの設定は不要（速い）

要素ごとにイベントハンドラをつけると
1. イベントハンドラの設定が要素の数だけ必要（遅い）
2. イベントハンドラが複数必要（メモリ多い）
3. イベント発生しても発生した要素のチェックが不要（速い）
4. 要素を増やす時イベントハンドラの設定が必要（遅い）

イベントハンドラの分メモリが必要と言っても関数の中身自体は共通化できるので
イベントハンドラを持っていますよーという情報のメモリ
またセレクタに一致しているかどうかは、比較的最近のブラウザなら
Element.matchesメソッドがDOM APIに追加されてるのでさほど遅くないはず

で結局の所トレードオフ問題でどちらが良いかはやってみないとわからないし
環境によって変わるし、DOMの構造によっても変わるだろうし、
俺なら気にせずデレゲーション使うだろうな
0859Name_Not_Found
垢版 |
2018/04/13(金) 23:13:06.28ID:???
>>826
の、上の程度ならもちろん変数使わないが
実際複雑になったり長くなったりすると下に近くするな
好みだが深くするのが嫌なので
0861Name_Not_Found
垢版 |
2018/04/14(土) 10:42:30.74ID:???
>>857
コードまで書いて一生懸命答えてても元文読み違えてたら全て無駄
の典型的パターンだよな
0862Name_Not_Found
垢版 |
2018/04/14(土) 13:36:33.13ID:???
>>859
同じく。↓とか

$('#hoge').children('li').eq(計算).children('span').text(なんたら).attr('hage', かんたら);
0863Name_Not_Found
垢版 |
2018/04/14(土) 13:57:12.43ID:???
$('#hoge')
　.children('li').eq(計算)
　.children('span').text(なんたら).attr('hage', かんたら);

って書けば良い
改行できない病かなにかか？
0864Name_Not_Found
垢版 |
2018/04/14(土) 16:45:43.21ID:???
こりゃ酷いな
全然意味わかってないことにワロタ
0865Name_Not_Found
垢版 |
2018/04/14(土) 19:06:18.76ID:???
じゃあその意味を説明しろよｗ
0866Name_Not_Found
垢版 |
2018/04/14(土) 19:33:42.67ID:???
>>864
むしろ流れ的にどうやったら改行の問題と読んだのかそのプロセスが知りたい
学生のテスト対策のヒントになるかもｗ
0867Name_Not_Found
垢版 |
2018/04/14(土) 22:21:32.83ID:???
いや改行の問題なんて言ってないだろｗ
改行を入れることで、読みやすくできるという話だよ

変数に入れればいいって言ってるやつだって
メソッド実行のたびに変数にだって入れないだろ？

「わかりやすい単位で変数に入れる」というはずだ。
だからそのわかりやすい単位で改行をいれればいいだけ
0868Name_Not_Found
垢版 |
2018/04/14(土) 22:23:03.64ID:???
>>859
ライブラリなどのサンプル見るとほとんどvarにセットしてる
0869Name_Not_Found
垢版 |
2018/04/14(土) 22:25:40.67ID:???
>>867
もういいよ、無理すんなって
益々墓穴掘ってる
0871Name_Not_Found
垢版 |
2018/04/15(日) 03:53:08.92ID:???
$('#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の方がわかりやすい気がするのは
行の最初に対象とするターゲットが来てるからかな
0872Name_Not_Found
垢版 |
2018/04/15(日) 07:02:06.07ID:???
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回使わない

同じものなら、変数に入れる。
その方が保守しやすく、最適化しやすく、少し速いかも
0873Name_Not_Found
垢版 |
2018/04/15(日) 09:47:01.46ID:???
>>871
計算やなんたらやかんたらを変数かと
0874Name_Not_Found
垢版 |
2018/04/15(日) 10:38:31.31ID:???
ここは相変わらず、jQuery君が他人に噛みつき、荒らし回ってるんだな
0876Name_Not_Found
垢版 |
2018/04/15(日) 11:36:01.24ID:???
>>875
スレタイのどこに「他人に噛みつき、荒らし回る」と書いてある？
0877Name_Not_Found
垢版 |
2018/04/15(日) 13:25:12.42ID:???
>>873

>>826の話とずれてる。
>>826は処理対象を変数に入れるって話
設定値を変数に入れるって話じゃない
0878Name_Not_Found
垢版 |
2018/04/15(日) 15:45:11.54ID:???
どうでもいい話をいつまで引っ張るんだか
0879Name_Not_Found
垢版 |
2018/04/15(日) 19:50:51.30ID:???
今回は負けない！って思ってるんでしょｗ
0880Name_Not_Found
垢版 |
2018/04/15(日) 20:50:02.64ID:???
そもそも>>804 >>820に対して（それを無視して）値を入れ替えてることがズレてる
誤解のもとという忠告もわかる
速度に関してはどっちでも変わらんから好みでやればいいだけ

>>859の変数使う好みに対して改行で解決しようとしてることがずれてる
これも好みでやればいいだけ
0881Name_Not_Found
垢版 |
2018/04/16(月) 20:50:53.24ID:???
blurメソッドを呼ぶと、
その要素に実際にフォーカスがあるかどうかに関わらずfocusoutが発生すると気づきました
これおかしくないですか？フォーカスがないんですから。
結果、二度focusoutが発生してしまい、変な嵌まり方をしてしまいました
0882Name_Not_Found
垢版 |
2018/04/16(月) 21:32:49.29ID:???
「blurする前にはfocusする」と覚えていればいいですね？
0885Name_Not_Found
垢版 |
2018/04/16(月) 21:52:51.22ID:???
あとキーボード系イベントをtriggerする時も、
条件を手動操作と同じにするためにfocusした方がいいと思います
そうですね？
0888Name_Not_Found
垢版 |
2018/04/17(火) 10:11:34.90ID:???
if (!$('セレクタ').children().length) {
$('セレクタ').remove();
}

みたいな処理をもっとスマートに書けないでしょうか？
メソッドチェーンで繋いだ一文で書けたらいいと思うのですが
0889Name_Not_Found
垢版 |
2018/04/17(火) 10:52:37.64ID:???
>>888
> if (!$('セレクタ').children().length) {
典型的な手続き型的なコードだねｗ
通常は「lengthみて要素があるかどうかを確認する」というコードはまるまる省ける。
状況にもよるだろうけど、俺はこれが必要な場合を思いつかない


で、回答だけど、まずCSSを使って、セレクタ:empty { display: none; } じゃいかんの？
わざわざremoveしなくても、画面上見えなくていいのであればコレでいける
ただしセレクタの中にはスペースなども含めて完全に空になってないといけないけど


次に実際に消す方法として、:has疑似クラスを使ったもの
$('セレクタ:not(:has(*))').remove();

:has擬似クラスはCSS4相当のものでブラウザネイティブでは実装されていないが、
jQueryは独自で実装しているので使える。IE11でも動いた。
https://api.jquery.com/has-selector/

こっちは完全に空じゃなくてもいいけど、タグなしで直接テキストが書かれていても
消えてしまう。といってもそれは>>888も同じだから問題ないだろう

あとはjQueryの.not や .has メソッドを使って
これと同じような結果になるコードをかけばできると思うけど
ちょっと面倒そうだな
0890Name_Not_Found
垢版 |
2018/04/17(火) 12:42:32.52ID:???
>>889
ありがとうございます
フィルタで絞り込むという発想がなかったので、学びが大きかったです
:hasとか:notとかはじめて使いました
ありがとうございました
0891Name_Not_Found
垢版 |
2018/04/17(火) 14:44:12.90ID:???
hasフィルタ/メソッドの対象は子要素ではなく子孫要素なんですね
子要素と書いているサイトが大量にありますが・・
対象を子要素に限りたい場合はどう書くのがいいのでしょうか？
0892Name_Not_Found
垢版 |
2018/04/17(火) 15:58:38.12ID:???
>>891
え？

子要素がない時はremoveする
ただし子要素が無くて子孫要素がある場合はremoveしたくない
ってこと？

子供がいないなら孫もいないでしょ？
0894Name_Not_Found
垢版 |
2018/04/17(火) 16:56:31.35ID:???
>>892
いえ、それはもう解決したので
別の話としてです
0895Name_Not_Found
垢版 |
2018/04/17(火) 17:02:07.73ID:???
>>893
試してみましたが子孫も含まれるようです
0897Name_Not_Found
垢版 |
2018/04/17(火) 18:43:46.53ID:???
>>896
すみません
書こうと思って見直していたら、
要素セレクタ部分が深い階層の要素にマッチしていたための勘違いと分かりました
要素セレクタ部分を第一階層にしかマッチしないようにしたら、たしかに子要素だけに限定出来ました！
ありがとうございます
ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか？
jQueryを結構長く使ってきたつもりですが、こういう書き方を今まで見たことがありません
0898Name_Not_Found
垢版 |
2018/04/17(火) 18:54:19.38ID:???
> ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか？

CSSの基本だから調べて
:hasはjQueryによって先行してサポートされた疑似セレクタだが
文法自体はjQueryが決めたものじゃないし
基本的なものはCSSのセレクタとまったく同じ
0900Name_Not_Found
垢版 |
2018/04/17(火) 19:44:07.38ID:???
CSSの親子関係の>と同じなのですね
>.hoge
は
*>.hoge
つまり
「何らかの要素の子要素の.hoge」
という意味になって、
これをhasと組み合わせることで子要素だけが選択できているのですね
親子セレクタの>は知っていましたが
特定数の階層を示す未知の記法なのかと思って混乱してしまいました
ありがとうございました
0902Name_Not_Found
垢版 |
2018/04/17(火) 22:43:02.39ID:???
>>901
やってみなければわからない。

ほらよ「jquery selector vs find https://jsperf.com 」で検索して
探してきてやったぜ。

https://jsperf.com/jquery-children-vs-find/37

Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな

理想的な結果だ。ブラウザによって違う。そんなの気にしたってしょうがない。
実用上問題ないなら気にすんな




どうでもいいが、EdgeだとChrome 58.0.3029と判定されるのな

Microsoft Edgeのユーザーエージェントがカオスなので注意
https://qiita.com/tonkotsuboy_com/items/7b36bdfc3a9a0970d23b
> Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 11)
> AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299
0903Name_Not_Found
垢版 |
2018/04/17(火) 22:44:18.45ID:???
あー、よくみりゃこれjQueryのバージョン低いな
0904Name_Not_Found
垢版 |
2018/04/17(火) 22:51:58.13ID:???
jsperf、githubアカウントが必要になったから面倒なんだよな
でもまあ1系でもquerySelectorAll使われてるし結果に大差はないだろ
0905Name_Not_Found
垢版 |
2018/04/18(水) 00:35:20.64ID:???
>>902
気にすることでもないのですね
ありがとうございました
0906Name_Not_Found
垢版 |
2018/04/18(水) 13:35:25.47ID:???
えー、何今みんなセレクタ使ってるんか？
速度差気にするほどでないのはもっともだが統一性からもメソッド使ってるわ
0908Name_Not_Found
垢版 |
2018/04/18(水) 22:25:44.36ID:???
$('#myContainer a');
じゃなくて
$('#myContainer').find('a');
こう書くってことだろ？

でも、 '#myContainer' も 'a' もセレクタなんだよねｗ
統一性をもたせるならむしろセレクタにしたほうが良い
0909Name_Not_Found
垢版 |
2018/04/18(水) 23:10:21.90ID:???
いやだからどっちもセレクタなんだろ？
0910Name_Not_Found
垢版 |
2018/04/18(水) 23:57:00.16ID:???
>>908
最初のセレクタは減らしてその後絞った方がいい
で統一ってことだろ
以前から書籍やブログで書かれている
0911Name_Not_Found
垢版 |
2018/04/19(木) 00:03:08.50ID:???
でも
Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな
0912Name_Not_Found
垢版 |
2018/04/19(木) 00:03:47.71ID:???
以前から書籍やブログで書かれているからって
あてにならないですねーｗ
0913Name_Not_Found
垢版 |
2018/04/19(木) 00:24:36.14ID:???
全部JSで書かれているならセレクタのパースの方が遅くなるはずですが
querySelectorはネイティブコードなので速くなってるのでしょうね
0914Name_Not_Found
垢版 |
2018/04/19(木) 10:49:10.87ID:???
>>910
それは 高速化のため？ 可読性のため？

場合によるけど、ほとんどの場合セレクタに書いた方が
可読性が高まって良いと思うよ

場合によるけど、時代や環境・実装によって変わる高速化より
可読性を優先した方が良いと思うよ
0915Name_Not_Found
垢版 |
2018/04/19(木) 19:57:35.89ID:???
速度でメソッド使ってるわ
もっとも3になってからは速度面では知らん
可読性ではどっちも変わらん

:has/has()、:first/first()、:eq/eq()など、またチェーンメソッドではどうなんだろ
0917Name_Not_Found
垢版 |
2018/04/19(木) 21:50:34.59ID:???
>>915
jQueryは1でも後半のはquerySelectorAllとか使ってる。
そもそも1と2は、1の方が対応している（古い）ブラウザが多いという
違いなので2でやってることは全て実装されていると考えるべき
3は統合版なので言うまでも無くだな
0918Name_Not_Found
垢版 |
2018/04/20(金) 00:10:12.72ID:???
なんで1と2になってるんだ？
0919Name_Not_Found
垢版 |
2018/04/20(金) 01:26:43.41ID:???
1系はIE6以降対応で、2系はIE6～8を切り捨てたもの。
（当時の）最新ブラウザには1系も2系も対応していた。
だから2系の方がファイルサイズは小さいが、
対応ブラウザは1系の方が多い状況だった

1系と2系は機能的には一緒でともに機能追加・メンテナンスも続いた。
通常であれば1系は古いバージョンで新機能は2系のみというのが
一般的なバージョンの分け方なのに、jQueryはそうなっておらず
混乱をもたらすということで、3系として合流することになった。

この時、通常のjQuery 3.0とは別に古いブラウザ対応のjQuery compat 3.0
というのが作られる予定だったが、IE8のサポート終了が早まったために
IE9以降対応のjQuery 3.0はに一本化された
0920Name_Not_Found
垢版 |
2018/04/20(金) 05:28:09.34ID:???
code.jquery.comの証明書が死んで、そこらじゅうのサイトが余波で崩壊してるね
とりあえずセキュリティ例外にぶっこめば動くには動くが・・・セキュリティ面でもサイト利用者にそれを求めるのかって点でもマズイな
0921Name_Not_Found
垢版 |
2018/04/20(金) 08:47:18.50ID:???
jQueryニキどういうこと！説明して！
0922Name_Not_Found
垢版 |
2018/04/20(金) 08:58:28.13ID:???
証明書とは・・？
籠池・・さん？でしたか？
0923Name_Not_Found
垢版 |
2018/04/20(金) 12:05:34.30ID:???
最近書き始めた者です。
jQuery用の入力候補とかインテリセンスを使っている人いますか？
0924Name_Not_Found
垢版 |
2018/04/20(金) 12:30:04.63ID:???
VSCodeを使っていますが、jQueryのメソッドも補完されますね
標準機能によるものなのか拡張機能によるものなのかは分かりませんが
0925Name_Not_Found
垢版 |
2018/04/20(金) 21:01:37.49ID:???
>>919
そんな基本的なこと長文書かなくてもわかってるから大丈夫
なぜ１と２の違いという全然関係ない話題に持って行こうとしてるのかということ
0926Name_Not_Found
垢版 |
2018/04/20(金) 23:30:47.85ID:???
>>925
それはそれとして、じゃあなんで1と2になってるんだ？
0928Name_Not_Found
垢版 |
2018/04/21(土) 00:02:08.92ID:???
えぇ…ニュースくらい見とけや……
0929Name_Not_Found
垢版 |
2018/04/21(土) 00:09:10.58ID:???
jQuery公式のCDNの証明書切れは
NHKで放送されるレベルだぞ
0931Name_Not_Found
垢版 |
2018/04/21(土) 11:40:57.73ID:???
>>930
なに言ってるんじゃなかくて、
なんで1と2になってるんだ？って
聞いてるんだが？
0932Name_Not_Found
垢版 |
2018/04/21(土) 11:43:43.74ID:???
さすがニュースは違うな。jQueryのCDNでトラブルがあった時、
jQuery使うなとかCDNを使うなという話ではなく
HTML標準ににフォールバック機能がないことが問題という話になってる
0935Name_Not_Found
垢版 |
2018/04/21(土) 15:21:43.98ID:???
サーバーが落ちるなんてことは普通に想定しておかなければ駄目なのでは？
CDNを使う限りあり得る問題なのでjQueryガーとか言ってる連中はアホですね？
0936Name_Not_Found
垢版 |
2018/04/21(土) 16:07:22.70ID:???
サーバが落ちることを想定してるからCDN使うんだが
0937Name_Not_Found
垢版 |
2018/04/21(土) 16:46:07.52ID:???
>>935
CDNとjQueryが何の関係があるの？
自分のサーバーで配信すればいいだけでしょ？
HTML標準にないだけで、CDNが落ちたら自分のサーバーに
置いたjQueryを使うという手法も有るしさ
0938Name_Not_Found
垢版 |
2018/04/21(土) 17:18:51.05ID:???
まずjQuery公式チュートリアルからcdn からロードしてる記述駆逐しようぜ！
個人の技術ブログとかのコードにもcdnからロードしてる箇所あったら取り締まって吊し上げよう。
cdn使うことで速度ガーとかキャッシュガーとか書いてる無責任サイトも潰そう。
0939Name_Not_Found
垢版 |
2018/04/21(土) 17:36:29.73ID:???
> 潰そう。
無理じゃね？ どうせお前本気じゃないし
できやしないことを語っても、虚しいだけだよ
0940Name_Not_Found
垢版 |
2018/04/21(土) 18:04:15.11ID:???
CDNが落ちてる時にjQueryを自サイトから読む
という処理をするにはどうしたらいいですか？
0941Name_Not_Found
垢版 |
2018/04/21(土) 18:08:57.59ID:???
一番簡単な実装は

<script src="cdn/jquery.js"></script>
<script>if(!jQuery) document.write('<script src="自サイト/jquery.js"></script>')</script>
0942Name_Not_Found
垢版 |
2018/04/21(土) 18:45:04.61ID:???
ありがとうございます
ということはスクリプトファイルの読み込みが終わるまで次のコードを実行しないようになっている
ってことですね
いや、そりゃそうか・・
ありがとうございました
0943Name_Not_Found
垢版 |
2018/04/21(土) 18:58:29.36ID:???
"</script>" はHTMLの終了タグと間違われるから
"</sc" + "ript>" みたいにしないとだめだけどな
0945Name_Not_Found
垢版 |
2018/04/21(土) 21:03:56.86ID:???
2から3への違いならまだしも1を比較に出す意味がわからんよな
そもそも元の論点そこじゃないし
0946Name_Not_Found
垢版 |
2018/04/22(日) 00:01:17.83ID:???
そんな事どうでもいいんだよ
なんで1と2になってるんだ？
なんでコレに答えられないの？
0947Name_Not_Found
垢版 |
2018/04/22(日) 04:51:22.00ID:???
質問が日本語として意味不明だから
0948Name_Not_Found
垢版 |
2018/04/22(日) 08:38:01.80ID:???
>>918は>>917に対して←これはわかる
>>926は>>925に対して
>>918と>>926は別人
ここまでは確か

同じ質問をしていることが意味不明だし、逆に聞かれて答えてないし
ただの荒らし行為にしか見えん
0949Name_Not_Found
垢版 |
2018/04/27(金) 06:25:41.76ID:???
>>910,911
ブラウザはここ１，２年でCSSエンジン周りにも力入れてて
セレクタもキャッシュが効くようにもなってきてるから
間接的にjQueryからquerySelectorを呼ぶセレクタなら
一纏めにしたほうが良いと思う
0950Name_Not_Found
垢版 |
2018/04/28(土) 15:19:44.90ID:???
.delay(10000).fadeOut('slow')
のように10秒後にフェードアウトする処理があって
フェードアウトする前に再び呼び出された時には前回のフェードアウト予約をキャンセルしたい場合は
どうすればいいのでしょうか？
0951Name_Not_Found
垢版 |
2018/04/28(土) 15:54:24.63ID:???
http://jsbin.com/mememujalo/edit?html,css,js,output

stopでdelayもキャンセルできるとネットには書いてあるのですが
15秒後にフェードアウトするようにして
10秒くらいの段階で「表示」をクリックして再び実行すると
5秒後にフェードアウトを開始します
つまりキャンセル出来ていないようです
どこが間違っているのでしょうか
0952Name_Not_Found
垢版 |
2018/04/29(日) 20:36:11.44ID:???
jqueryで、
ある要素をhideした時にイベントを発火するようにする
みたいなことできますか？
0954Name_Not_Found
垢版 |
2018/05/01(火) 18:31:02.21ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

7MVQ5
0958Name_Not_Found
垢版 |
2018/05/03(木) 14:51:52.20ID:???
…それそのスタックオーバーフローのコメント欄で聞けばよくね？
0959Name_Not_Found
垢版 |
2018/05/03(木) 15:25:47.67ID:???
don't need the .show()
と言われてもノーコメントのところを見ると答えてくれるとは思えませんが？
0960Name_Not_Found
垢版 |
2018/05/03(木) 15:32:28.19ID:???
>>957
考え方がそもそも間違っている。
cssを直接変更するのは最後の手段
基本的にclass（もしくはその他の属性）を書き換えるようにする

例えば $('#myFlexbox').addClass('active') みたいにして
CSSで、#myFlexbox.active { display: flexbox } のようにする
JavaScriptでやるのはclass等の書き換え。見た目はCSSで記述する
0961Name_Not_Found
垢版 |
2018/05/03(木) 15:33:00.65ID:???
任意数のDOM要素が入った配列があります
その要素を500msの間隔を置いて一つ一つコンテナ要素に追加していきたいのですが
どう書けばいいでしょうか？
0962Name_Not_Found
垢版 |
2018/05/03(木) 15:34:26.28ID:???
>>960
ああ、なるほど・・
その方が綺麗ですね
ありがとうございました
0963Name_Not_Found
垢版 |
2018/05/03(木) 15:39:21.45ID:???
なお、showの仕様は昔から変わっているはず
また、flexboxは比較的新しい機能だから
使えないブラウザがある（あった）

そのコードのshowは、昔の仕様の
display:blockにする"以外"の処理に依存している部分が
あったからかもしれないし、display:flexに対応していないブラウザでは
display:blockを使うことでほぼ同じ動きになっていたのかもしれない
0964Name_Not_Found
垢版 |
2018/05/03(木) 16:49:22.37ID:???
使えないブラウザがあるとか言うのはいい加減もう良いよ
そもそもそんな貧相なブラウザを使い続けてる人がリッチな表示に期待してるはずがない
むしろ、そういう環境は往々にしてスペックが貧弱だから素朴で最低限な表示の方がありがたいんだよ
だからそういう環境はJS無効組とかとまとめて、切り離して扱うくらいがちょうどいいんだよ

同じ表示、体験に拘る必要は無い
そうすればリッチ組に割く労力も減るし、読み込ませるリソース量も最低限で済む
0965Name_Not_Found
垢版 |
2018/05/03(木) 17:11:00.86ID:???
>>964
いきなり何脈絡のない話してんの？
誰に何を言ってるのかさっぱりわからないんだが
0966Name_Not_Found
垢版 |
2018/05/03(木) 17:56:27.93ID:???
flexboxが使えないブラウザがあるから、代わりにこうすると良いかもとか考えだすとキリがないし、
結局いつまで経っても新しい物を使えないか、重厚なフレームワークやライブラリを噛ますようになるだろ
無駄なのよ

もうね、寝たきりのおじいちゃんをGWだからとどうにかして海に連れて行くことを考えるのは辞めろということ
爺はベッドに寝かせたまま海の動画を見せとくくらいで良いんだよ

flexbox使おうかなと思ったんなら堂々とそのまま使えばいい
無駄なことを考えるのは辞めろ
0967Name_Not_Found
垢版 |
2018/05/03(木) 18:05:29.88ID:???
なんだ馬鹿か
話の流れも見ないで、使えないブラウザがあるって
言葉をみて、トチ狂って書き込んだだけのアホだな
0968Name_Not_Found
垢版 |
2018/05/03(木) 18:45:14.15ID:???
>>964
リッチというほどでもないしJS切捨ては飛躍しすぎだろ
0970Name_Not_Found
垢版 |
2018/05/03(木) 23:25:24.74ID:???
下腹部をhideしてから女子高生の前でshowしてみたら、
問題ありで逮捕されました
変なおじさんで笑って済ませられたのは昔の話だったのですね
ありがとうございました
0971Name_Not_Found
垢版 |
2018/05/04(金) 00:40:53.67ID:???
Bootstrap Multiselectを使用しているのですが、
すれ違いですかね。

プルダウンメニューが開かれたままで最初は開閉ができないのがどうにかならないのかと思いまして。
0972Name_Not_Found
垢版 |
2018/05/04(金) 09:37:21.60ID:???
>>949
その根拠（ソース）は？

全てのブラウザにもそれが通用する？特にOpera miniなどドロ用など
0973Name_Not_Found
垢版 |
2018/05/04(金) 11:56:20.02ID:???
>>972
利用者が少ないブラウザなんて切り捨てて良いんじゃないですかねー

>>966も無駄だって言ってますしー
> flexboxが使えないブラウザがあるから、代わりにこうすると良いかもとか考えだすとキリがないし、
> 結局いつまで経っても新しい物を使えないか、重厚なフレームワークやライブラリを噛ますようになるだろ
> 無駄なのよ
0974Name_Not_Found
垢版 |
2018/05/04(金) 12:38:03.69ID:???
> 利用者が少ないブラウザ
PCを使えない池沼
こんなの切り捨てで十分、増してWebブラウザなんて無料なんだしｗ
0975Name_Not_Found
垢版 |
2018/05/04(金) 19:53:40.79ID:???
答えになってないな
PCが使えないではなくて自分含め両方使い分ける人がいる
0976Name_Not_Found
垢版 |
2018/05/04(金) 20:35:57.40ID:???
ドロ用が利用者が少ないとはどんな感覚してんだ
モバイル系切るなんて有り得んわ
持ってるサイトの1つは７～8割それらからのアクセス

しかも今回の件は切り捨てる理由がない
書き方が違うだけで、速度や保守面など大きなデメリットはないのだからな
0977Name_Not_Found
垢版 |
2018/05/04(金) 21:01:57.70ID:???
え？Android用の使われてないブラウザでしょ？
Opera miniなんて。切り捨てましょうそんなゴミ
0978Name_Not_Found
垢版 |
2018/05/04(金) 21:52:18.46ID:???
例えばだろ
でもって最初の質問に全く答えてない
0979Name_Not_Found
垢版 |
2018/05/04(金) 21:53:01.76ID:???
Android用の使われてるブラウザならどうなんだって話
0980Name_Not_Found
垢版 |
2018/05/04(金) 22:05:23.82ID:???
古いドロブラウザ使ってる環境こそ
JSやスタイルなんてほとんど適応しない質素なテキストページを案内すべきだと思うけどな
0981Name_Not_Found
垢版 |
2018/05/04(金) 22:35:31.34ID:???
話の飛躍は逃げの一手なのかな
0982Name_Not_Found
垢版 |
2018/05/04(金) 22:59:59.89ID:???
「話の飛躍は逃げの一手なのかな」
これこそが他者との相互理解を放棄した無価値なレス
0983Name_Not_Found
垢版 |
2018/05/04(金) 23:41:10.01ID:???
IE6がPC用の使われてるブラウザならどうなんだって話
0984Name_Not_Found
垢版 |
2018/05/05(土) 01:31:04.92ID:???
>>982
「話の飛躍」も相互理解を放棄している気がせんでもない
お互い様
0986Name_Not_Found
垢版 |
2018/05/05(土) 12:28:05.68ID:???
正論じゃないだろ。
Opera Miniはアンドロイド用の使われてないブラウザだ
使われてないブラウザは切り捨てるべきだよ
そうすることでブラウザの開発のやる気を無くさせる
開発が停止する。使ってる人もいなくなる。
0987Name_Not_Found
垢版 |
2018/05/05(土) 12:29:48.91ID:???
>>969の件ですが
chromeのデベロッパーツールを見ながら操作していて気づいたのですが
やはりshowはHTMLのstyle属性に'display:blockを設定しているようです
style属性でblockを上書きしてるのに何故ちゃんとflexboxになっているのか・・？
謎ですね？
0989Name_Not_Found
垢版 |
2018/05/05(土) 15:23:32.15ID:???
つまらなくても現実は受け入れないといけない
Opera Miniは使われていない
0990Name_Not_Found
垢版 |
2018/05/05(土) 15:30:28.50ID:???
使われていなくはないだろ
それにMiniではない方はどうなんだ

使われている、切らない、キャッシュが効くというブラウザは
どれとどれなのか具体的に挙げてみてくれ
0991Name_Not_Found
垢版 |
2018/05/05(土) 15:34:03.95ID:???
>>986
お前の考えなんて誰も聞いてない
せめて>>972に答えてからにしてくれ
0992Name_Not_Found
垢版 |
2018/05/05(土) 15:54:26.05ID:???
> 使われていなくはないだろ
> それにMiniではない方はどうなんだ
使われていない
0993Name_Not_Found
垢版 |
2018/05/05(土) 16:32:20.30ID:???
>>992
Miniではない方はキャッシュはどうなんだ？
どのブラウザなら効くのだ？
逃げるなよ
0994Name_Not_Found
垢版 |
2018/05/05(土) 16:36:46.13ID:???
>993
だからそんなブラウザのことを考える必要はないんだって
切り捨てるんだから
0995Name_Not_Found
垢版 |
2018/05/05(土) 16:38:46.81ID:???
>>994
日本語理解できない人だったのか、ごめんな、追い詰めて
0996Name_Not_Found
垢版 |
2018/05/05(土) 16:47:55.91ID:???
なんだ？いきなりの自己紹介か？ｗ
0997Name_Not_Found
垢版 |
2018/05/05(土) 17:00:41.13ID:???
別に使われてなくてもサポートしてもいいんじゃない
それこそこれからは冷蔵庫からアクセスされるかもしれないんだからさ
スマートアシスタントみたいなBotが情報を得るためにアクセスしてきたり
操作もするようには絶対になる話だからさ

ありとあらゆることを想定しておくべきとは言わないけれど、
反対に狭い範囲だけを想定しすぎて可能性を潰すのはだめじゃよ
0998Name_Not_Found
垢版 |
2018/05/05(土) 17:18:57.49ID:???
>>996
逃げてばかりで説明できないんだろ？ｗ
0999Name_Not_Found
垢版 |
2018/05/05(土) 17:20:11.80ID:???
>>994
切り捨てるか否かは制作次第
お前の判断なんてどうでもいい
10011001
垢版 |
Over 1000Thread
このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 194日 10時間 49分 11秒
10021002
垢版 |
Over 1000Thread
5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。


───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────

会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。

▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/

▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php
レス数が1000を超えています。これ以上書き込みはできません。
ニューススポーツなんでも実況