jQuery 質問スレッド vol.8
レス数が1000を超えています。これ以上書き込みはできません。
>>633
classっていうのは共有のもので皆が追加していくもんだ
きちんとスペースで区切って使うというコンセンサスがあり衝突はしない
一方data-*はだれがどう使うか分からない removeClass()って何気に便利だな
値関係なくとりあえず全部消してくれる この間classで衝突したけどなぁ?
どうやれば衝突しないん? まだdataかclassかweakmapかって話してたのかw >>645
初学者なのでeachでゴリゴリ回す発想しかありませんでしたが
そのような書き方が出来るのですね
参考になります
ありがとうございます アロー関数を使えばもっと減らせる
と書きつつあえて使わないのはなんなの?
そっちのほうが分かりやすいと思ってんの? <要素 class="bbb eee fff jjj">と、
要素に値(class)を持たせ、値は動的に変化します
この要素は今どの値を持っているかはclassNameで簡単に取得できますが
classを使わずdata-*で持たせた場合はどう取得するのでしょうか?
アロー関数無しでお願いします >>656
穿った見方をすれば、これまでの話の対抗策として書いた感じがするが、
要件が違うから、"今回の場合"は classを使ったほうが良いよと
"この間の例"では、data-*属性を勧めていた俺が答えるw いやいや、『この間の例』は要件や目的がはっきりしてないんだから
結局何が最適かは分かりませんと言うことがFAでしょ
だからこういう場合には、とか一般的にはとか話が広がってたのに
その中で大口叩いておいて細かいことに逃げるのは感心しないな
いくら屁理屈こねようとも、周りの人へ感覚的にどう思わせたかってことが大事だからね >>659は自分の書いた内容を自分で見たほうが良い。
おまえはその書いた内容の話をしたいのかと >>659
>結局何が最適かは分かりませんと言うことがFAでしょ
>だからこういう場合には
この辺りはもっともだし、よくわかるが後半よくわからん DOM に状態を持たせるな!
DOM に状態を問い合わせるな!
React を使え! 状態が要素の外側の見た目振る舞いに関わるものならclassで良い
例えば一度クリックされたボタンに永続効果をつけるためのクラス「clicked」とか
そして中身の内容にしか関わらないものであればdata-*が良い
商品を読み込んでDOMに書き出すスクリプトと
商品を絞り込むスクリプトが独立してあった場合
その間でやり取りするために使う商品の種類情報など
ただ特にスクリプトから要素を検索しないといけない場合はそれなりのコストがかかるので、
そういうスクリプトを統合して、状態をスクリプト中に持たせたほうがスッキリする場合もある なんか見た目を変えるものはclassを思ってるかもしれないけど
属性セレクタが作られたのは、属性で見た目を変えられるようにするためだからね
属性セレクタをには必要とされる機能が追加されている
前方一致、後方一致、そしてclassのようにスペース区切りで
単語が含まれているかどうか、等がある classは名前の通り分類分けのもの
様々な要素に共通する分類を指定する際にはclass
属性はただその要素固有の性質 限られた情報の中で答えるのはそうするしかない上にありがたいが
木だけ見て森全体がわかったように断定してたのはちょっと引くわな 属性やめてjs側に持っていくべきとか意味不明だったよなw いや、実際Mapは有用だと思う
>>665の真ん中の例だと
最初から商品情報がHTMLとして存在している場合は
DOMに書き加えるという機能とDOMの情報を編集するという機能に分割するほうが良さげだが
そうでない場合はDOMはただのViewと捉えてModelはJS側で持っておくほうが良さげ 誰がどう読んでもdata君のことなのに無理やりmap君とか見苦しいったら dataでも、classでもHTMLとしては意味はないが、
data属性を使う場合はdataメソッドの取り扱いには注意が必要
動的に追加、削除、変更する場合に
$(Elements).data('hoge') で値を参照するとキャッシュされるで動的変更の値は参照できない
$(Elements).attr('data-hoge') では問題はないけどね
あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明 >>676
それ以前に、dataメソッドでは
data属性を変えることはできないよ
data属性を変える必要が無いなら、dateメソッドで十分だし
書き換える必要があるなら、attrメソッドを使えと言うだけの話
> あくまでもカスタム属性なので広い意味で動的に扱うならばclassを使うのが賢明
その結論はおかしい。なぜならdata属性の読み書きにはattrメソッドを使う
その場合注意する点は何もないわけで、もっというのならDOM APIを使うならば
dataメソッドがdata属性を書き換えるものではないなどという混乱はおきない
つまり、あんたのレスの最後の行はその行以前の話とは全く関係なく
取ってつけたように出てきてる。
カスタム属性を使うかの基準は動的かどうかではなくclassという名前の
属性に入れるのがふさわしいか、別の名前の属性に入れたほうが良いかの違いでしょ?
例えばariaのrole属性だって、classにaria-role-button なんて名前で入れることだって
できただろうけど、そんなことせずにrole属性を作りましょうとなったわけだ
classとは違った別の目的が有るのならclassを使わずに、カスタム属性を使いましょう
そのために汎用にいくつでも自由に属性を作って良いことになったわけなんだから jQueryにもdatasetメソッドを作れば良いのかも あ、DOM APIのDataset APIは読み取り専用だったw 嫌いなやつを追い出すには、徹底的に反論して論破するのと
無視するのと煽るのどれが一番効果的だろうか? >>682
楽しいのは煽りだね どんどん無知さらして笑われてるのに本人は気付かないからな
徹底的に反論はアホには反論自体が理解できないから意味ない
追い出したいだけなら無視が一番だけど 聞いたかい?俺がdata君なわけだけど、本当に荒らしを
しているのは誰かよくわかっただろ? >>675
WeakMapくんは俺だが自演なんかしてないよ >>674
意味分かってないな
>>685
俺は承知 何も意見を言わずに支持を表明する理由は、
ほら支持してる人がいるだろ?と見せるのが目的だって死んだじいちゃんが言ってた。
名前を隠して言うことで沢山の人に支持されてるように見せられるんだって >>687
それ煽りだけ入れる人、意見を言わずに否定だけする人も同じだよ >>687
匿名掲示板でそんなこと言ってもだから何としか
ちなみに674は明らかに言わんとしてることに対してずれてるぞ もうdata-属性は自分で勝手に定義しちゃダメとか言い出しそうな勢いだなw >>664
jQuery(js)はそれなりに使ってるがReactだとその件に関してどういうメリットあるの? jQuery → DOM
React → 仮想DOM → DOM
React では、DOMを更新しない場合に、React内の仮想DOMに問い合わせるだけ。
DOMにアクセスしない
React内に、DOMのコピーを持ってる
状態を問い合わせるだけとか、DOMを更新しない場合に、
ブラウザにアクセスしないから速い >>694
それって単に変数に問い合わせたいものの
情報を持たせればいいだけだよね? >>694
状態を問い合わせるだけとか、DOMを更新しない場合に、
レンダリングされないのでDOMにアクセスしても速いよ >>696
それだけじゃあんまり意味なくて、効率的な差分更新アルゴリズムが事実上必須。 >>698
マッチポンプって感じだよねw
やらなくてもいいのに仮想DOMとかいう無駄な仕組みを追加して、
仮想DOMという仕組みのせいで遅くなっちゃった、
だから遅くならないように差分更新アルゴリズムを作らなきゃ!w
最初から仮想DOMなんてものがなければシンプルで
無駄のない処理を書くことができるのに。
やっぱり馬鹿対策なのかな?
馬鹿が無駄なコードを書いてもなるべく遅くならないように
する防御策が仮想DOMw >>699
> 馬鹿が無駄なコードを書いてもなるべく遅くならないようにする防御策が仮想DOMw
いやこれマジこの通りだよ。
現在のDOMがどうなってるか気にしないで書けるんだから。
天才が常にありうるすべての場合のDOMの状態を把握して狙い澄ました最小限のDOM変更コードを書けるならそっちのほうが速い。
ところがいかな大企業と言えど天才のみでチームを組めないし、ライフサイクルの最後までそいつらをそのプロジェクトに縛り付けることも出来ない。
カップ麺スゲーと言ってるところにラーメン屋のラーメンには敵わないだろwと言ってるようなもん。 >>700
天才は現在のDOMを意識なんかしてねーよ
その時点でずれてるんだな。
天才っていうほどでもないが普通は
DOMが変化しても柔軟に対応できるように作る
idやclassや属性を使うことで、実際のDOMが
変わったとしてもコードはそのままで動くようにする
それは作業分担にもつながる。DOM(HTML)を書くのは
ほかの人に任せることができる。同様にCSSもだな
仮想DOMを使うとプログラマがHTML相当のものを書かなければいけなくなる。
自分の担当の部分に集中できる仕組みにするのが常識だと思ってる俺に
なに?天才はありとあらゆることを把握してる? アホかw
前提が間違ってるんだわ。
あらゆることを把握するのが無理だから仮想DOMが必要だって思ってるようだが
こっちはあらゆることを把握しなくていいから仮想DOMは不要だって言ってるんだよ > idやclassや属性を使うことで、実際のDOMが変わったとしてもコードはそのままで動くようにする
そうなってないコード山ほどあるよね?
理由は出来ないやつ気にもしないやつがたくさんいるから。 できないやつは何を使ってもできないだろ
人間の問題は技術の話の対象外だ 程度と言うものがあるだろ。
DOM直接操作に比べて仮想dom使ってるライブラリは簡単だよ。
だって宣言的に書くだけで操作しなくていいんだもの。
diffしてパッチ作って実domに反映はライブラリがやってくれる。
だからバカにウケてる。
カップ麺が低所得者層にウケるのと同じ。 それを言うならHTMLを書くだけで
画面にレンダリングされるが?
プログラム一切不要 Reactの良さはDOMからセマンティクスやなんやかんや
とにかくレンダリングに必須でない部分を削ぎ落としたスマートな仮想DOMを提供してくれることで
もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる > もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる
俺に言わせれば、それらが、世界に多数存在するウェブサイトに
どう適用できるの?って感じだけどな
Reactは完全にオーバースペックなんだわ >>708
そもそも既存のWebサイトに適応するようなものではないということ
出発点が違うからオーバースペックとかいう話にはならない 嫁さんがちゃんとご飯作ってくれてるのにわざわざカップ麺買ってきていつ食べるか悩んでるようなもの。
でも独身には人気。そういうこと。 よく分からんけど、画面側とか作ってくれる人が別にいるのに
自分一人で画面も何もかも作っていた人にとっては
Reactは便利ってことかな? 俺の嫁さんは2日に1回は平気でインスタントを晩飯として食わせるぞ jQueryがHTMLエスケープ用のメソッドを用意していない理由は何ですか?
あほなのでしょうか? >>717
textってHTMLエスケープされるんですね
というか当然ですね・・
半角スペースが に置き換わらないのでしないのかと勘違いしましたが
スペースはHTMLエスケープに含まれなかったです 半角スペースとnbspは別物だからな
nbspは何の略かしってるか? non-breaking space、自動改行しないスペースだ
半角スペース(英単語の区切り)では一行に収まらなければ改行するが
nbspだと自動改行しない。別物だ。エスケープじゃねぇ >>719
まさに望まない場所で改行されることに困って置換したのですが
「自動改行しないスペース」の意味だとは気づきませんでした
ありがとうございました blurイベントはデレゲートできませんでした
おそらくバブリングしないからだと思います
バブリングしないイベントは全てデレゲートできないと考えていいのでしょうか? 特定のページにアクセすしたときに
<div class="contents">
...
</div>
の中だけ表示ってできますか?
特定の要素だけ非表示ってのはできるみたいなんですけど 質問です。
target属性が指定されていないaタグ を選択するにはどのように書けばよろしいでしょうか? a:not(:target) じゃねぇの? jQueryというよりセレクタの話 >>725
効かないようですが、記述間違ってますか?
<style>
a:not(:target){
border: solid 1px #000;
}
</style>
<a href="https://www.google.co.jp/">targetなし</a>
<a href="https://www.google.co.jp/" target="_blank">targetあり</a> すいません解決しました
a:not([target])
でした :targetなんていう疑似クラスあったのかと思ってしまった 一応有るけど違う意味だったな
:target
https://developer.mozilla.org/ja/docs/Web/CSS/:target
CSS の :target 疑似クラスは、 URL のフラグメントに一致する id を持つ固有の要素(対象要素)を表します。
:target Selector
https://api.jquery.com/target-selector/ 722ですけどスタイルを変更できるのはしってるんですけど
visibleをnoneにするのは簡単でもきりとるのはそれ以外の全部けさないとだし
ターゲットの親は残さないといけないしで簡単にやる方法ってないのかなと… すっかりアロー関数式を使うようになっていたのですが
jQueryはメソッドの中でthisを使うことが多いので
アロー関数式だと問題が出ます
普通の関数を書くしかないのでしょうか? コールバックにthisで渡される変数は引数でも渡されているので
こっちを使うのがES6風なのでしょうか? なんでもかんでもアロー関数を使うのが間違いだと思うけどね
addEventListenerでも同じ問題が有るけど
そういう風にthisが変わるようなときには使わないほうが良いと思う
誰か知らないけど(w)この人も同じようなことを言ってる
https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
> 2. Callback functions with dynamic context
個人的にはアロー関数は、関数を値のように使いたいときだけにしてほしい
それは大抵一行で済むものになるので () => { return n } みたいな
{} とreturnを使う構文は無くしてほしいね オブジェクト指向的にthisを使うためにアロー関数を使うわけで、
イベントハンドラではtargetを使うのが普通だと思う 少なくともmdnだとメソッドでない関数に最適と書いてある。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions
そうするとオブジェクト指向的にthisを使うため、って出自ではなさそうだが。
むしろ関数型的に使うためでは。
イベントハンドラではtargetを使うのが普通というのはそう思う。 >>738
その文書の"thisを束縛しない"の項目に、
>これは、オブジェクト指向プログラミングをする上で煩わしいということが分かりました。
って書いてあるよ そういや関数型に使うんならそもそもthis使わないし短く書けるくらいしか使用上の違いなかったな 別にアロー関数がオブジェクト指向に向いてるというわけでもそうでないわけでもない
アロー関数はメソッド自体として使うには確かに不適切
だがメソッド中で関数を定義したりすると必要になるthat=thisなんかは不要になる
適材適所 jsbinで追加出来るjQueryのバージョンに
jQuery WIP
という版があるのですが、このWIPとは何の略でしょうか? >>744
作成中というような意味ですね
とすると、新しいほどいいだろうと思って選んでいましたが
あまり使わない方がいいのでしょうね
ありがとうございました どんどん使うべきだよ
万が一問題があってもそれを報告すればいいだけだし
自分のスキル向上にもなる
良いことしか無い removeの範囲にdataを持った要素があった場合、
そのdataも解放されるのでしょうか? そこまで気になるようになったのなら自分でソース見て調べたほうが良い もし、そのdata が、削除されないオブジェクトから、参照されていれば、
必要だから、dataはガベージ(GC)されない
生きているオブジェクトからの、参照カウントが1以上あるから
メモリリークするかどうか、チェックすべし 参照がなければGCされるということですか?
逆に言うとdataが含まれた要素をjQuery外から削除してしまったら
メモリリークになるということでしょうか。
危険ですね? 麻薬の禁断症状は麻薬を使い続ればいいからな。理にかなっている >>752はイかれてるんじゃないかと正直思う
メモリリークなんて普段から怖がってかかるものじゃない
プロジェクトを進めてきて一段落する度にちょっと確認してみるだけ
それで意図しないメモリの増加があればメモリリークが起きてるのかなとなる
そのときにプロファイルをとって調べればいい
ただしjQueryのようなライブラリを使ってると調査の難易度が格段に増す Backbone.js は、DOM を削除した際に、そのDOMの子孫に、
イベントハンドラーがあっても削除されないから、メモリリークになるけど、
jQuery では、そういうイベントハンドラーも、自動的にすべて削除するから、
メモリリークにならないとか、何かで読んだ
まあ、jQueryをデバッグ実行して、確かめて下さい >>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'});
}) replaceWithでも当然
dataやイベントリスナ―の処置はしてくれますよね? >>757
はい。jQueryを使っている限りメモリリークはしません >>758
jQueryは神なんですね
ありがとうございました なるほど。確かに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() を使うなら、まぁ問題無いです。 cleanDataなんていう裏メソッドがあったのですね
ありがとうございます >>756
callback の中で event.currentTarget で要素を取得するように書けば
循環参照にならないのでメモリリークは防げることになるよね 連続している複数の要素をひとかたまりのjQueryオブジェクトにすることって出来ますか?
それに対してreplaceWithして、その部分をごっそり入れ替えたいのです
全てがある要素の子要素なら出来ると思いますが
そういうコンテナを設置せずにやりたいです >>764
複数の要素を一塊にするのが、jQueryオブジェクトの本質みたいなものだから
連続してようがしてまいが一塊にできる。
だけど連続してない場合に「どこと」入れ替えたいのかが区別つかない
あなたは連続していることだけを想定しているから、どこと入れ替えても同じ結果になるので
気にしていないかもしれないけど、jQueryは連続して無くても扱えるものなので
それを考慮しなければいけない
で、どうするかだけど、連続する複数の要素のうち
最初の要素を入れ替え対象とし、その後の要素は消してしまえばいい
(実際には処理する順番は逆にすることになるだろうけど)
$('li + li').remove();
$('li').replaceWith('<li>a</li>');
これが単純でわかりやすいと思うけど、頑張れば
メソッドチェーンで一行で書けるかもね >>765
なるほど〜
先頭一つを残して削除するなんて思いつきませんでした
ありがとうございます あとはclass付けるとかsliceとかprevAll/nextAllとか Vanilla JSでどう実装するのか解った上で
jQueryを使いたいと思うのですが
そういう人のための総括的な解説をしている
書籍を探してます。
もし知ってたら教えて下さい。 >>768
そういう人のためがどういう人なのか分からんが
普通にjQueryの良書でよい
コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)
https://www.amazon.co.jp/dp/4798124281
jQueryクックブック
https://www.amazon.co.jp/dp/4873114683 >>769
ありがとうございます。
購読検討してみます。 jQueryを使って
ある要素が何番目の要素なのかを調べるにはどうすればいいですか? あとセレクタのnth-childとかnth-of-typeが使えるかもね >>773
ありがとうございます
出来ました
要素自体が属性として持っているんじゃないかと思っていたのですが
配列の要素が配列のインデックスを持っていないように
DOMの要素も自分のインデックスを持っていないのでしょうね 変数の状態をコンポーネントに反映するみたいなことを
jQueryでスマートにやるにはどうするのが一番いいのでしょうか?
たとえば変数の状態をドロップボックスに反映させるなど。
もちろんそういう変数を作って呼び出せば出来ますが、
なんかイケてない気がします
反映させる処理をコンポーネント自体に帰属させて呼ぶ感じにしたいです
カスタムイベントでしょうか? 最近のフレームワークは
使ったことはないのでよくは知りませんが
変数とコンポーネントの紐付けもやってくれてる感じがします
似たようなことをjQueryでやるにはどうすればいいのでしょうか ×そういう変数を作って
○そういう関数を作って
でした 追加で質問です。変数とコンポーネントの紐付け
jQueryなどのJavaScriptライブラリやフレームワークを
使わない場合はどうやるのでしょうか?
その方法があるとして、jQueryにも応用できますか? >>780
リテラルとは何のことでしょうか
>>781
別人ならもっと別人らしく書いてください
>>782
ありがとうございます
読んでみます >>782の記事を読んでいますが
未知のパラダイムの洪水で混乱してきました
素直にデータバインディングライブラリの勉強した方がいいパターンですねこれは・・ だからそう言ってるだろ…
でもデータバインディングライブラリはいっぱいありすぎて逆に迷うな。
ある程度高機能になったらそこまでやるならもうvuejs使えよってなっちゃうからそれよりシンプルかが判断の分かれ目か。
https://github.com/gwendall/way.js/
とかどうかね?あとrivets.jsとか… >>785
確かに単機能でシンプルな方がいいですね
見てみます
ありがとうございました 以下のような、横に伸びる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>
よろしくお願いします >>787
過去スレに似たような話が出たけど
なに? コピペ? また同じ話したいの? $('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行以上あると、誤動作するかも >>790
> <tr> が、2行以上あると、誤動作するかも
普通複数あるだろw 表のヘッダーだけじゃないのか?
表のデータも、1つのセルにまとめるのか? <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行ずつ分けて、処理すべき >>790
動作を確認できました
超リスペクトです
ありがとうございます!
他の方が指摘している部分で問題が無いか確認しつつ、参考にさせて頂きます >>792
自分はtrごとにclassを付けて対応しました
あくまでヘッダで使いたかったので煩くはならなかったですが、10行超えるような行で適用すると泥臭くなりそうだとは思いました 複数行にも使うの?
複数行の場合は、
>>795
の例では、2行目のB に、colspan="2" が付くから、ダメだろ
1行ごとに一旦、処理を切らないといけない
>>789
は、難解すぎて、訳がわからない >>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();
}
}) >>799
> は、難解すぎて、訳がわからない
縦横量対応 + jQueryプラグイン化してあるからねw
短いのであれば、こっちにあった(少しだけ変更してみた)
コードの説明はリンク先へ
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])'); そういや >>789は更に最初からcolspanがある場合にも対応していたはず 色々と参考コードをありがとうございます
799さんのコードは理解が難しかったですが、改造案件ではこういうのをワンサカ見るんだろうなと思うので理解できるよう努力したいと思います 何度も同じjQueryオブジェクトを使う時には
今でも一旦変数に代入した方がいいのでしょうか?
$document = $(document)
のように。
パフォーマンスから言えば代入した方がいいはずですが、
もう気にしなくていいような気もします マシンが高性能になっているので
マイクロ秒レベルのパフォーマンスの違いなんて気する時代ではないのでは?
という意味です というか1マイクロ秒の違いすらあるのか怪しいですよね・・ documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ 確かに引数に文字列を渡す場合はパース処理が入るので何度も実行したくはないですね
引数がDOMオブジェクトの場合は許容範囲の感じがします
場合によりけりということでしょうか
ありがとうございました みんなjqueryオブジェクトには$付き変数つかってる?
それとも気にしない派? おれは気にしない派 >>808
> documentならいいだろうが複雑でパフォーマンス考慮のないCSSセレクタ書くとマイクロ秒オーダーじゃ済まないよ
具体例あげられますか? そこそこの規模のDOMを用意し、CSSセレクタでパフォーマンスの観点から避けるべきと言われていること(ユニバーサルセレクタとか子孫セレクタとか一般兄弟セレクタとか)をあえてすべて踏む長めのセレクタをぶっこんでトライ!
まさか計測まで人にやらせるつもりじゃねーだろうな >>813
計測はこっちでやってやるよ
お前は黙ってセレクタを書け >>814
じゃ黙ってDOM用意しな。セレクタはDOM依存だからな。 セレクタの遅さはDOM依存じゃないが?
そんなにDOM用意しろって言うなら
ほらよ。遅いセレクタ書いてみなw
<span>a</span> DOM依存であることを示してるように見えるのだが… >>817
オレなら >>816 のaを選択するのにたっぷり0.1秒はかかるセレクタを書くことができるッ!
しかもそいつはつい先日納品したプロジェクトで使用したばかりのやつだッ! >>804
2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき
変数に入れずに、2回書いたら、その間にDOM に、
何か変化があるのかも、と思ってしまう
変化が無いなら、変数に入れた方が、わかりやすい $(event.currentTarget)
とかもわざわざ変数に入れるんですか? コールバックの中でvar $this = $(this);とか稀によく見る >>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"}); この使い方も重要
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); >>825-826
ありがとうございます
知らない方法ばかりです
関数を渡してフィルタみたいな処理ができるのは良さげです
変数をなるべく使いたくないっていうのは、
関数型っぽく書きたいっていうところから来てるんですよね >>827
名前を使いたくない ってのが一番大きい理由だと思うよ
おれ自身はチョイ関数でもバンバン定義する派だけど、使いたくない理由もわかる >>820
804ではないが参考になった
以前速度差ないとのことで変数に入れずにいたが
そういうことならわかりやすくていいですね 変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな >>820が変数に入れるべきと言った途端
> 2回以上使う場合で、その間、変化が無いなら、変数に入れて使うべき
↓これだよw
> 変数使わないべき、それ以外認めんと徹底抗戦してたのいたからな >>820
> 変数に入れずに、2回書いたら、その間にDOM に、
> 何か変化があるのかも、と思ってしまう
>
> 変化が無いなら、変数に入れた方が、わかりやすい
どういうこと?
変数に入れた所で、変化するでしょ?
$id = $('#id')
$id.text(123);
$id.text(); // 変数に入れたのに123に変わってる
jQueryにDOM要素の状態をさせるメソッドは
たくさんあるけど、どれも変数に入れても変化するものばかり
唯一の例外はremoveしても(DOMの状態は変化しているが)
jQueryオブジェクトには参照が残ってるってことぐらい
それだけなのに"変化がないなら変数に入れたほうがわかりやすい"は大げさ 変数に入れても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 いや、再代入してないよw
----はただの区切り
別々の話ね。 >同じjQueryオブジェクトを使う時には
とあるのに何入れ替えてるんだよw 変数に入れても、
・DOM要素の内容は変わる
・DOMの構造も変わる
・DOM要素の参照は残ってる
って所かな?
jQueryとか関係なく
var elm = document.getElementById('id'),
って書いてるのと同じ。
ID=idをdocumentのDOMツリーからremove()しても、
elmという参照は残ったまま
逆に言えば、参照は残ったままだけど、
DOM要素への変更は反映される。jQueryでも同じ >>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
} 変数に入れておけば、異なる参照を指すことはない。
このリストが、別のリストに変わったりしない
変化する場合でも、その要素・コンテキスト以下・子孫要素しか変わらない
祖先の要素が変わって、別の要素を指すようになったりしないから、
意図がわかりやすい >>841
よく考えてほしいんだけどさ、
一行目、私は○○にデータを書き換えます。
二行目、○○にデータが書き換わった状態であってほしい
これの方が直感的だよね? >>840
そんなことは書かれる前からわかっとるわ、基本だろ
そういうことでなくて質問と>>838はDOMを変化させない前提だろうよ
パフォーマンス云々言ってるのだし だから変数に入れてもDOMは変化しますよって言ってるんだが?
変数に入れることで、どういう勘違いを
あなたはしてるのですか?っていう話 順を追って説明しないと理解できてなさそう
1. DOMを変化させない前提
2. 変数に入れないと、DOMが変化するように見える
3. 変数に入れると、DOMは変化しないように見える
4. でも変数に入れても実際はDOMは変化する
5. つまり3は勘違い。変数に入れてるのをみてDOMが変化しないように見えたら、それは目が悪い。 久しぶりに除いたが「変数使わないべき、それ以外認めん」の人がまた勘違いで話捻じ曲げて強引に押し通そうとしてるのか その話は知らんけど、>>845に何か物申すこと有る? × 変数に入れずに、2回書いたら、その間にDOM に何か変化があるのかも、と思ってしまう
○ 変数に入れても、2回書いた時、その間にDOMに何か変化があることがある。
× 変数に入れるとDOMは変化しない
○ 変数に入れるとDOMを変化させてもDOM要素への参照は残っている
なんで正しい説明ができないんだろう? >>844
問題文をもう一度読もうか
先ずはそこからだ そして、これを踏まえて説明すると、
jQueryではメソッドチェーンでつなぐことで
変数に入れなくても、変数に入れたのと同じ状態を作ることができる。 >>850
問題文ってこれ?
> 804 名前:Name_Not_Found[sage] 投稿日:2018/04/09(月) 12:47:31.90 ID:???
> 何度も同じjQueryオブジェクトを使う時には
> 今でも一旦変数に代入した方がいいのでしょうか?
> $document = $(document)
> のように。
> パフォーマンスから言えば代入した方がいいはずですが、
> もう気にしなくていいような気もします
じゃああんたはその次のレスを読もうか?
そのレスが間違ってるって話をしてるんだから 変数に入れたらDOMに変化がないと思うだろ!
いや、思わんね(笑)
これだけの話 ちなみの最初の話をすると
$document = $(document)
変数に代入しなくても、document変数に参照が残ってる。
$element = $(this)
変数に代入しなくても、this変数に参照が残ってる
element = document.getElementById('id')
$element = $(element)
変数に代入しなくても、element変数に参照が残ってる
わけで、毎回 $(documet)、$(this)、$(element) を実行しても
(DOMではなく参照が)変わらないことは保証される 一般的にイベントのデレゲーションは負荷軽減に繋がると言われていますが
$(document).on('click','.hoge a',fn)
のようにセレクタで指定している場合、
クリックのたびにイベントが起きた要素がセレクタと一致するかを調べるので
結構負荷が高くなるのではないかと思いました
$('.hoge a').on('click',fn)
のように要素に直接リスナを登録した場合、セレクタの解釈はリスナの登録時だけなので、負荷は小さくなるのでは?
ただデレゲーションの場合、リスナ登録時に存在しないDOMのイベントも捕捉できるという意味もあるので
簡単に置き換えることはできませんが 表に、100セルがある場合、
各セルに、イベントハンドラーを付けると、100個になる
これらの処理が似ている場合には、
表に、1つのイベントハンドラーだけを付けて、
各セルの座標値を、計算した方がよい >>855
負荷とひとまとめにしてるけど、
典型的な速度を取るかメモリを取るか問題やね
デレゲーションを使うと、
1. イベントハンドラの設定が1回ですむ(速い)
2. イベントハンドラが一つで済む(メモリ少ない)
3. イベント発生ごとに発生した要素のチェックが必要(遅い)
4. 要素を増やしてもイベントハンドラの設定は不要(速い)
要素ごとにイベントハンドラをつけると
1. イベントハンドラの設定が要素の数だけ必要(遅い)
2. イベントハンドラが複数必要(メモリ多い)
3. イベント発生しても発生した要素のチェックが不要(速い)
4. 要素を増やす時イベントハンドラの設定が必要(遅い)
イベントハンドラの分メモリが必要と言っても関数の中身自体は共通化できるので
イベントハンドラを持っていますよーという情報のメモリ
またセレクタに一致しているかどうかは、比較的最近のブラウザなら
Element.matchesメソッドがDOM APIに追加されてるのでさほど遅くないはず
で結局の所トレードオフ問題でどちらが良いかはやってみないとわからないし
環境によって変わるし、DOMの構造によっても変わるだろうし、
俺なら気にせずデレゲーション使うだろうな >>826
の、上の程度ならもちろん変数使わないが
実際複雑になったり長くなったりすると下に近くするな
好みだが深くするのが嫌なので >>857
コードまで書いて一生懸命答えてても元文読み違えてたら全て無駄
の典型的パターンだよな >>859
同じく。↓とか
$('#hoge').children('li').eq(計算).children('span').text(なんたら).attr('hage', かんたら); $('#hoge')
.children('li').eq(計算)
.children('span').text(なんたら).attr('hage', かんたら);
って書けば良い
改行できない病かなにかか? >>864
むしろ流れ的にどうやったら改行の問題と読んだのかそのプロセスが知りたい
学生のテスト対策のヒントになるかもw いや改行の問題なんて言ってないだろw
改行を入れることで、読みやすくできるという話だよ
変数に入れればいいって言ってるやつだって
メソッド実行のたびに変数にだって入れないだろ?
「わかりやすい単位で変数に入れる」というはずだ。
だからそのわかりやすい単位で改行をいれればいいだけ >>859
ライブラリなどのサンプル見るとほとんどvarにセットしてる >>867
もういいよ、無理すんなって
益々墓穴掘ってる $('#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の方がわかりやすい気がするのは
行の最初に対象とするターゲットが来てるからかな 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回使わない
同じものなら、変数に入れる。
その方が保守しやすく、最適化しやすく、少し速いかも ここは相変わらず、jQuery君が他人に噛みつき、荒らし回ってるんだな >>875
スレタイのどこに「他人に噛みつき、荒らし回る」と書いてある? >>873
>>826の話とずれてる。
>>826は処理対象を変数に入れるって話
設定値を変数に入れるって話じゃない そもそも>>804 >>820に対して(それを無視して)値を入れ替えてることがズレてる
誤解のもとという忠告もわかる
速度に関してはどっちでも変わらんから好みでやればいいだけ
>>859の変数使う好みに対して改行で解決しようとしてることがずれてる
これも好みでやればいいだけ blurメソッドを呼ぶと、
その要素に実際にフォーカスがあるかどうかに関わらずfocusoutが発生すると気づきました
これおかしくないですか?フォーカスがないんですから。
結果、二度focusoutが発生してしまい、変な嵌まり方をしてしまいました 「blurする前にはfocusする」と覚えていればいいですね? あとキーボード系イベントをtriggerする時も、
条件を手動操作と同じにするためにfocusした方がいいと思います
そうですね? if (!$('セレクタ').children().length) {
$('セレクタ').remove();
}
みたいな処理をもっとスマートに書けないでしょうか?
メソッドチェーンで繋いだ一文で書けたらいいと思うのですが >>888
> if (!$('セレクタ').children().length) {
典型的な手続き型的なコードだねw
通常は「lengthみて要素があるかどうかを確認する」というコードはまるまる省ける。
状況にもよるだろうけど、俺はこれが必要な場合を思いつかない
で、回答だけど、まずCSSを使って、セレクタ:empty { display: none; } じゃいかんの?
わざわざremoveしなくても、画面上見えなくていいのであればコレでいける
ただしセレクタの中にはスペースなども含めて完全に空になってないといけないけど
次に実際に消す方法として、:has疑似クラスを使ったもの
$('セレクタ:not(:has(*))').remove();
:has擬似クラスはCSS4相当のものでブラウザネイティブでは実装されていないが、
jQueryは独自で実装しているので使える。IE11でも動いた。
https://api.jquery.com/has-selector/
こっちは完全に空じゃなくてもいいけど、タグなしで直接テキストが書かれていても
消えてしまう。といってもそれは>>888も同じだから問題ないだろう
あとはjQueryの.not や .has メソッドを使って
これと同じような結果になるコードをかけばできると思うけど
ちょっと面倒そうだな >>889
ありがとうございます
フィルタで絞り込むという発想がなかったので、学びが大きかったです
:hasとか:notとかはじめて使いました
ありがとうございました hasフィルタ/メソッドの対象は子要素ではなく子孫要素なんですね
子要素と書いているサイトが大量にありますが・・
対象を子要素に限りたい場合はどう書くのがいいのでしょうか? >>891
え?
子要素がない時はremoveする
ただし子要素が無くて子孫要素がある場合はremoveしたくない
ってこと?
子供がいないなら孫もいないでしょ? >>892
いえ、それはもう解決したので
別の話としてです >>893
試してみましたが子孫も含まれるようです >>896
すみません
書こうと思って見直していたら、
要素セレクタ部分が深い階層の要素にマッチしていたための勘違いと分かりました
要素セレクタ部分を第一階層にしかマッチしないようにしたら、たしかに子要素だけに限定出来ました!
ありがとうございます
ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか?
jQueryを結構長く使ってきたつもりですが、こういう書き方を今まで見たことがありません > ですが、「>」を最初に置く書き方はどんな意味になるのでしょうか?
CSSの基本だから調べて
:hasはjQueryによって先行してサポートされた疑似セレクタだが
文法自体はjQueryが決めたものじゃないし
基本的なものはCSSのセレクタとまったく同じ CSSの親子関係の>と同じなのですね
>.hoge
は
*>.hoge
つまり
「何らかの要素の子要素の.hoge」
という意味になって、
これをhasと組み合わせることで子要素だけが選択できているのですね
親子セレクタの>は知っていましたが
特定数の階層を示す未知の記法なのかと思って混乱してしまいました
ありがとうございました 高速で安全なjQueryを書くために今できること
http://dresscording.com/blog/jquery_performance.html
$('#myContainer a');
と書くより
$('#myContainer').find('a');
と書く方が速いとあります
2013年の記事ですが、今でもそうした方がいいですか? >>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 あー、よくみりゃこれjQueryのバージョン低いな jsperf、githubアカウントが必要になったから面倒なんだよな
でもまあ1系でもquerySelectorAll使われてるし結果に大差はないだろ >>902
気にすることでもないのですね
ありがとうございました えー、何今みんなセレクタ使ってるんか?
速度差気にするほどでないのはもっともだが統一性からもメソッド使ってるわ $('#myContainer a');
じゃなくて
$('#myContainer').find('a');
こう書くってことだろ?
でも、 '#myContainer' も 'a' もセレクタなんだよねw
統一性をもたせるならむしろセレクタにしたほうが良い >>908
最初のセレクタは減らしてその後絞った方がいい
で統一ってことだろ
以前から書籍やブログで書かれている でも
Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな 以前から書籍やブログで書かれているからって
あてにならないですねーw 全部JSで書かれているならセレクタのパースの方が遅くなるはずですが
querySelectorはネイティブコードなので速くなってるのでしょうね >>910
それは 高速化のため? 可読性のため?
場合によるけど、ほとんどの場合セレクタに書いた方が
可読性が高まって良いと思うよ
場合によるけど、時代や環境・実装によって変わる高速化より
可読性を優先した方が良いと思うよ 速度でメソッド使ってるわ
もっとも3になってからは速度面では知らん
可読性ではどっちも変わらん
:has/has()、:first/first()、:eq/eq()など、またチェーンメソッドではどうなんだろ >>915
jQueryは1でも後半のはquerySelectorAllとか使ってる。
そもそも1と2は、1の方が対応している(古い)ブラウザが多いという
違いなので2でやってることは全て実装されていると考えるべき
3は統合版なので言うまでも無くだな 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はに一本化された code.jquery.comの証明書が死んで、そこらじゅうのサイトが余波で崩壊してるね
とりあえずセキュリティ例外にぶっこめば動くには動くが・・・セキュリティ面でもサイト利用者にそれを求めるのかって点でもマズイな 最近書き始めた者です。
jQuery用の入力候補とかインテリセンスを使っている人いますか? VSCodeを使っていますが、jQueryのメソッドも補完されますね
標準機能によるものなのか拡張機能によるものなのかは分かりませんが >>919
そんな基本的なこと長文書かなくてもわかってるから大丈夫
なぜ1と2の違いという全然関係ない話題に持って行こうとしてるのかということ >>925
それはそれとして、じゃあなんで1と2になってるんだ? jQuery公式のCDNの証明書切れは
NHKで放送されるレベルだぞ >>930
なに言ってるんじゃなかくて、
なんで1と2になってるんだ?って
聞いてるんだが? さすがニュースは違うな。jQueryのCDNでトラブルがあった時、
jQuery使うなとかCDNを使うなという話ではなく
HTML標準ににフォールバック機能がないことが問題という話になってる サーバーが落ちるなんてことは普通に想定しておかなければ駄目なのでは?
CDNを使う限りあり得る問題なのでjQueryガーとか言ってる連中はアホですね? サーバが落ちることを想定してるからCDN使うんだが >>935
CDNとjQueryが何の関係があるの?
自分のサーバーで配信すればいいだけでしょ?
HTML標準にないだけで、CDNが落ちたら自分のサーバーに
置いたjQueryを使うという手法も有るしさ まずjQuery公式チュートリアルからcdn からロードしてる記述駆逐しようぜ!
個人の技術ブログとかのコードにもcdnからロードしてる箇所あったら取り締まって吊し上げよう。
cdn使うことで速度ガーとかキャッシュガーとか書いてる無責任サイトも潰そう。 > 潰そう。
無理じゃね? どうせお前本気じゃないし
できやしないことを語っても、虚しいだけだよ CDNが落ちてる時にjQueryを自サイトから読む
という処理をするにはどうしたらいいですか? 一番簡単な実装は
<script src="cdn/jquery.js"></script>
<script>if(!jQuery) document.write('<script src="自サイト/jquery.js"></script>')</script> ありがとうございます
ということはスクリプトファイルの読み込みが終わるまで次のコードを実行しないようになっている
ってことですね
いや、そりゃそうか・・
ありがとうございました "</script>" はHTMLの終了タグと間違われるから
"</sc" + "ript>" みたいにしないとだめだけどな 2から3への違いならまだしも1を比較に出す意味がわからんよな
そもそも元の論点そこじゃないし そんな事どうでもいいんだよ
なんで1と2になってるんだ?
なんでコレに答えられないの? >>918は>>917に対して←これはわかる
>>926は>>925に対して
>>918と>>926は別人
ここまでは確か
同じ質問をしていることが意味不明だし、逆に聞かれて答えてないし
ただの荒らし行為にしか見えん >>910,911
ブラウザはここ1,2年でCSSエンジン周りにも力入れてて
セレクタもキャッシュが効くようにもなってきてるから
間接的にjQueryからquerySelectorを呼ぶセレクタなら
一纏めにしたほうが良いと思う .delay(10000).fadeOut('slow')
のように10秒後にフェードアウトする処理があって
フェードアウトする前に再び呼び出された時には前回のフェードアウト予約をキャンセルしたい場合は
どうすればいいのでしょうか? http://jsbin.com/mememujalo/edit?html,css,js,output
stopでdelayもキャンセルできるとネットには書いてあるのですが
15秒後にフェードアウトするようにして
10秒くらいの段階で「表示」をクリックして再び実行すると
5秒後にフェードアウトを開始します
つまりキャンセル出来ていないようです
どこが間違っているのでしょうか jqueryで、
ある要素をhideした時にイベントを発火するようにする
みたいなことできますか? 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
7MVQ5 https://stackoverflow.com/questions/38491653/jquery-show-a-flex-box
showはdisplayをblockにするはずだから
要素がflexboxの時はどうするのだろう?と思ってググったらこのページが出てきました
$('#myFlexbox').show().css('display', 'flex');
とありますが、show()を入れる意味は何でしょうか? …それそのスタックオーバーフローのコメント欄で聞けばよくね? don't need the .show()
と言われてもノーコメントのところを見ると答えてくれるとは思えませんが? >>957
考え方がそもそも間違っている。
cssを直接変更するのは最後の手段
基本的にclass(もしくはその他の属性)を書き換えるようにする
例えば $('#myFlexbox').addClass('active') みたいにして
CSSで、#myFlexbox.active { display: flexbox } のようにする
JavaScriptでやるのはclass等の書き換え。見た目はCSSで記述する 任意数のDOM要素が入った配列があります
その要素を500msの間隔を置いて一つ一つコンテナ要素に追加していきたいのですが
どう書けばいいでしょうか? >>960
ああ、なるほど・・
その方が綺麗ですね
ありがとうございました なお、showの仕様は昔から変わっているはず
また、flexboxは比較的新しい機能だから
使えないブラウザがある(あった)
そのコードのshowは、昔の仕様の
display:blockにする"以外"の処理に依存している部分が
あったからかもしれないし、display:flexに対応していないブラウザでは
display:blockを使うことでほぼ同じ動きになっていたのかもしれない 使えないブラウザがあるとか言うのはいい加減もう良いよ
そもそもそんな貧相なブラウザを使い続けてる人がリッチな表示に期待してるはずがない
むしろ、そういう環境は往々にしてスペックが貧弱だから素朴で最低限な表示の方がありがたいんだよ
だからそういう環境はJS無効組とかとまとめて、切り離して扱うくらいがちょうどいいんだよ
同じ表示、体験に拘る必要は無い
そうすればリッチ組に割く労力も減るし、読み込ませるリソース量も最低限で済む >>964
いきなり何脈絡のない話してんの?
誰に何を言ってるのかさっぱりわからないんだが flexboxが使えないブラウザがあるから、代わりにこうすると良いかもとか考えだすとキリがないし、
結局いつまで経っても新しい物を使えないか、重厚なフレームワークやライブラリを噛ますようになるだろ
無駄なのよ
もうね、寝たきりのおじいちゃんをGWだからとどうにかして海に連れて行くことを考えるのは辞めろということ
爺はベッドに寝かせたまま海の動画を見せとくくらいで良いんだよ
flexbox使おうかなと思ったんなら堂々とそのまま使えばいい
無駄なことを考えるのは辞めろ なんだ馬鹿か
話の流れも見ないで、使えないブラウザがあるって
言葉をみて、トチ狂って書き込んだだけのアホだな >>964
リッチというほどでもないしJS切捨ては飛躍しすぎだろ >>963
http://jsbin.com/zineqikupe/edit?html,css,js,output
flexboxをhideしてからshowしてみたら、
問題なく表示されました
表示時にblockを設定していたのは昔の話だったのですね
ありがとうございました 下腹部をhideしてから女子高生の前でshowしてみたら、
問題ありで逮捕されました
変なおじさんで笑って済ませられたのは昔の話だったのですね
ありがとうございました Bootstrap Multiselectを使用しているのですが、
すれ違いですかね。
プルダウンメニューが開かれたままで最初は開閉ができないのがどうにかならないのかと思いまして。 >>949
その根拠(ソース)は?
全てのブラウザにもそれが通用する?特にOpera miniなどドロ用など >>972
利用者が少ないブラウザなんて切り捨てて良いんじゃないですかねー
>>966も無駄だって言ってますしー
> flexboxが使えないブラウザがあるから、代わりにこうすると良いかもとか考えだすとキリがないし、
> 結局いつまで経っても新しい物を使えないか、重厚なフレームワークやライブラリを噛ますようになるだろ
> 無駄なのよ > 利用者が少ないブラウザ
PCを使えない池沼
こんなの切り捨てで十分、増してWebブラウザなんて無料なんだしw 答えになってないな
PCが使えないではなくて自分含め両方使い分ける人がいる ドロ用が利用者が少ないとはどんな感覚してんだ
モバイル系切るなんて有り得んわ
持ってるサイトの1つは7〜8割それらからのアクセス
しかも今回の件は切り捨てる理由がない
書き方が違うだけで、速度や保守面など大きなデメリットはないのだからな え?Android用の使われてないブラウザでしょ?
Opera miniなんて。切り捨てましょうそんなゴミ Android用の使われてるブラウザならどうなんだって話 古いドロブラウザ使ってる環境こそ
JSやスタイルなんてほとんど適応しない質素なテキストページを案内すべきだと思うけどな 「話の飛躍は逃げの一手なのかな」
これこそが他者との相互理解を放棄した無価値なレス IE6がPC用の使われてるブラウザならどうなんだって話 >>982
「話の飛躍」も相互理解を放棄している気がせんでもない
お互い様 >>976は正論
結局>>>949は根拠のない妄想だったのかな 正論じゃないだろ。
Opera Miniはアンドロイド用の使われてないブラウザだ
使われてないブラウザは切り捨てるべきだよ
そうすることでブラウザの開発のやる気を無くさせる
開発が停止する。使ってる人もいなくなる。 >>969の件ですが
chromeのデベロッパーツールを見ながら操作していて気づいたのですが
やはりshowはHTMLのstyle属性に'display:blockを設定しているようです
style属性でblockを上書きしてるのに何故ちゃんとflexboxになっているのか・・?
謎ですね? つまらなくても現実は受け入れないといけない
Opera Miniは使われていない 使われていなくはないだろ
それにMiniではない方はどうなんだ
使われている、切らない、キャッシュが効くというブラウザは
どれとどれなのか具体的に挙げてみてくれ >>986
お前の考えなんて誰も聞いてない
せめて>>972に答えてからにしてくれ > 使われていなくはないだろ
> それにMiniではない方はどうなんだ
使われていない >>992
Miniではない方はキャッシュはどうなんだ?
どのブラウザなら効くのだ?
逃げるなよ >993
だからそんなブラウザのことを考える必要はないんだって
切り捨てるんだから >>994
日本語理解できない人だったのか、ごめんな、追い詰めて 別に使われてなくてもサポートしてもいいんじゃない
それこそこれからは冷蔵庫からアクセスされるかもしれないんだからさ
スマートアシスタントみたいなBotが情報を得るためにアクセスしてきたり
操作もするようには絶対になる話だからさ
ありとあらゆることを想定しておくべきとは言わないけれど、
反対に狭い範囲だけを想定しすぎて可能性を潰すのはだめじゃよ >>994
切り捨てるか否かは制作次第
お前の判断なんてどうでもいい このスレッドは1000を超えました。
新しいスレッドを立ててください。
life time: 194日 10時間 49分 11秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。