元スレjQuery 質問スレッド vol.8

JavaScript覧

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで

751 = :

参照がなければGCされるということですか？
逆に言うとdataが含まれた要素をjQuery外から削除してしまったら
メモリリークになるということでしょうか。
危険ですね？

752 = :

だからjQueryを使いましょうという話になる

753 = :

麻薬の禁断症状は麻薬を使い続ればいいからな。理にかなっている

754 = :

>>752はイかれてるんじゃないかと正直思う
メモリリークなんて普段から怖がってかかるものじゃない
プロジェクトを進めてきて一段落する度にちょっと確認してみるだけ
それで意図しないメモリの増加があればメモリリークが起きてるのかなとなる

そのときにプロファイルをとって調べればいい
ただしjQueryのようなライブラリを使ってると調査の難易度が格段に増す

755 = :

Backbone.js は、DOM を削除した際に、そのDOMの子孫に、
イベントハンドラーがあっても削除されないから、メモリリークになるけど、

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

まあ、jQueryをデバッグ実行して、確かめて下さい

756 = :

>>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'});
})

757 = :

replaceWithでも当然
dataやイベントリスナ―の処置はしてくれますよね？

758 = :

>>757
はい。jQueryを使っている限りメモリリークはしません

759 = :

>>758
jQueryは神なんですね
ありがとうございました

760 = :

神ではありません。素晴らしいライブラリです。

761 = :

なるほど。確かにjQuery.cleanDataを呼び出しているようだな

http://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() を使うなら、まぁ問題無いです。

764 = :

連続している複数の要素をひとかたまりのjQueryオブジェクトにすることって出来ますか？
それに対してreplaceWithして、その部分をごっそり入れ替えたいのです
全てがある要素の子要素なら出来ると思いますが
そういうコンテナを設置せずにやりたいです

765 = :

>>764
複数の要素を一塊にするのが、jQueryオブジェクトの本質みたいなものだから
連続してようがしてまいが一塊にできる。

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

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

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

これが単純でわかりやすいと思うけど、頑張れば
メソッドチェーンで一行で書けるかもね

766 = :

>>765
なるほど～
先頭一つを残して削除するなんて思いつきませんでした
ありがとうございます

768 = :

Vanilla JSでどう実装するのか解った上で
jQueryを使いたいと思うのですが
そういう人のための総括的な解説をしている
書籍を探してます。
もし知ってたら教えて下さい。

769 = :

>>768
そういう人のためがどういう人なのか分からんが
普通にjQueryの良書でよい

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)
http://www.amazon.co.jp/dp/4798124281

jQueryクックブック
http://www.amazon.co.jp/dp/4873114683

770 = :

>>769
ありがとうございます。
購読検討してみます。

771 = :

jQueryを使って
ある要素が何番目の要素なのかを調べるにはどうすればいいですか？

772 = :

×何番目の要素
○何番目の子要素

でした

773 = :

>>771
index()

775 = :

使えません

776 = :

>>773
ありがとうございます
出来ました
要素自体が属性として持っているんじゃないかと思っていたのですが
配列の要素が配列のインデックスを持っていないように
DOMの要素も自分のインデックスを持っていないのでしょうね

777 = :

変数の状態をコンポーネントに反映するみたいなことを
jQueryでスマートにやるにはどうするのが一番いいのでしょうか？
たとえば変数の状態をドロップボックスに反映させるなど。
もちろんそういう変数を作って呼び出せば出来ますが、
なんかイケてない気がします
反映させる処理をコンポーネント自体に帰属させて呼ぶ感じにしたいです
カスタムイベントでしょうか？

778 = :

最近のフレームワークは
使ったことはないのでよくは知りませんが
変数とコンポーネントの紐付けもやってくれてる感じがします
似たようなことをjQueryでやるにはどうすればいいのでしょうか

779 = :

×そういう変数を作って
○そういう関数を作って

でした

780 = :

よくわからんがリテラルにすればいいのでは

781 = :

追加で質問です。変数とコンポーネントの紐付け
jQueryなどのJavaScriptライブラリやフレームワークを
使わない場合はどうやるのでしょうか？
その方法があるとして、jQueryにも応用できますか？

782 = :

>>778
データバインディングは専用のライブラリ使えばいいと思うが…簡単なのに。
どうしてもと言うならこれ読め。
http://postd.cc/boiling-react-down-to-a-few-lines-in-jquery/

783 = :

>>780
リテラルとは何のことでしょうか

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

>>782
ありがとうございます
読んでみます

784 = :

>>782の記事を読んでいますが
未知のパラダイムの洪水で混乱してきました
素直にデータバインディングライブラリの勉強した方がいいパターンですねこれは・・

785 = :

だからそう言ってるだろ…
でもデータバインディングライブラリはいっぱいありすぎて逆に迷うな。
ある程度高機能になったらそこまでやるならもうvuejs使えよってなっちゃうからそれよりシンプルかが判断の分かれ目か。
http://github.com/gwendall/way.js/
とかどうかね？あとrivets.jsとか…

786 = :

>>785
確かに単機能でシンプルな方がいいですね
見てみます
ありがとうございました

787 :

以下のような、横に伸びる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>

よろしくお願いします

788 = :

>>787
過去スレに似たような話が出たけど
なに？ コピペ？ また同じ話したいの？

789 = :

>>787
ほらよ。過去スレから探し出して余計な物削っといたで
http://jsfiddle.net/eoxzjqwu/53/

790 = :

$('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行以上あると、誤動作するかも

792 = :

>>790
> <tr> が、2行以上あると、誤動作するかも
普通複数あるだろw

793 = :

表のヘッダーだけじゃないのか？

表のデータも、1つのセルにまとめるのか？

794 = :

裏のフッター

795 = :

<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行ずつ分けて、処理すべき

796 = :

>>789に答え出てるんだからそれでいいだろ

797 = :

>>790
動作を確認できました
超リスペクトです
ありがとうございます!

他の方が指摘している部分で問題が無いか確認しつつ、参考にさせて頂きます

798 = :

>>792
自分はtrごとにclassを付けて対応しました

あくまでヘッダで使いたかったので煩くはならなかったですが、10行超えるような行で適用すると泥臭くなりそうだとは思いました

799 = :

複数行にも使うの？

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

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

>>789
は、難解すぎて、訳がわからない

800 = :

>>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();
}
})

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ

類似してるかもしれないスレッド

• jQuery 質問スレッド vol.7 (1001) - [96%] - 2017/11/1 7:45
• + jQuery 質問用スレッド vol.7 + (136) - [76%] - 2022/12/5 13:00
• JavaScript の質問用スレッド vol.132 (1001) - [51%] - 2017/3/22 8:00
• + JavaScript の質問用スレッド vol.82 + (1001) - [48%] - 2011/1/19 7:54
• + JavaScript の質問用スレッド vol.89 + (1001) - [48%] - 2011/9/4 4:17
• + JavaScript の質問用スレッド vol.88 + (1001) - [48%] - 2011/7/20 7:03
• + JavaScript の質問用スレッド vol.87 + (1001) - [48%] - 2011/6/21 6:33