X
jQuery 質問スレッド vol.8
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2017/10/23(月) 06:31:18.14ID:???
JavaScriptでDOM用ライブラリであるjQueryのスレです。
次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。

JavaScriptの質問は関連スレで質問して下さい。

■前スレ
jQuery 質問スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1478055094/

■関連スレ
JavaScript の質問用スレッド vol.130
https://mevius.5ch.net/test/read.cgi/hp/1501503056/
ECMAScript デス 6
https://mevius.5ch.net/test/read.cgi/tech/1483332914/
JavaScript ライブラリ総合質問所 vol.5
https://echo.5ch.net/test/read.cgi/hp/1465399470/
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);とか稀によく見る
■ このスレッドは過去ログ倉庫に格納されています
ニューススポーツなんでも実況