jQuery 質問スレッド vol.8
レス数が950を超えています。1000を超えると書き込みができなくなります。
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/ >>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 メソッドを使って
これと同じような結果になるコードをかけばできると思うけど
ちょっと面倒そうだな >>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' もセレクタなんだよねｗ
統一性をもたせるならむしろセレクタにしたほうが良い >>908
最初のセレクタは減らしてその後絞った方がいい
で統一ってことだろ
以前から書籍やブログで書かれている でも
Chromeだと、$('#formElem fieldset'); の方が速くて
Edge、IE、Firefox だと $('#formElem').find('fieldset') の方が速いんだな 以前から書籍やブログで書かれているからって
あてにならないですねーｗ 全部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
そんな基本的なこと長文書かなくてもわかってるから大丈夫
なぜ１と２の違いという全然関係ない話題に持って行こうとしてるのかということ >>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
ブラウザはここ１，２年で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ブラウザなんて無料なんだしｗ 答えになってないな
PCが使えないではなくて自分含め両方使い分ける人がいる ドロ用が利用者が少ないとはどんな感覚してんだ
モバイル系切るなんて有り得んわ
持ってるサイトの1つは７〜8割それらからのアクセス
しかも今回の件は切り捨てる理由がない
書き方が違うだけで、速度や保守面など大きなデメリットはないのだからな え？Android用の使われてないブラウザでしょ？
Opera miniなんて。切り捨てましょうそんなゴミ Android用の使われてるブラウザならどうなんだって話 古いドロブラウザ使ってる環境こそ
JSやスタイルなんてほとんど適応しない質素なテキストページを案内すべきだと思うけどな 「話の飛躍は逃げの一手なのかな」
これこそが他者との相互理解を放棄した無価値なレス IE6がPC用の使われてるブラウザならどうなんだって話 >>982
「話の飛躍」も相互理解を放棄している気がせんでもない
お互い様 >>976は正論
結局>>>949は根拠のない妄想だったのかな 正論じゃないだろ。
Opera Miniはアンドロイド用の使われてないブラウザだ
使われてないブラウザは切り捨てるべきだよ
そうすることでブラウザの開発のやる気を無くさせる
開発が停止する。使ってる人もいなくなる。 >>969の件ですが
chromeのデベロッパーツールを見ながら操作していて気づいたのですが
やはりshowはHTMLのstyle属性に'display:blockを設定しているようです
style属性でblockを上書きしてるのに何故ちゃんとflexboxになっているのか・・？
謎ですね？ レス数が950を超えています。1000を超えると書き込みができなくなります。
