X
jQuery 質問スレッド vol.8
レス数が1000を超えています。これ以上書き込みはできません。
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を超えています。これ以上書き込みはできません。
ニューススポーツなんでも実況