+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptで一番有名なDOM用関数型風ライブラリであるjQueryのスレです。 jQueryを使うとJavaScript単体では面倒な処理でもほんの数行で実現可能になります。 一部でもうjQueryは要らない等と言ってますが、あれはjQueryよりも導入が大変な フレームワークを導入したらいらなくなるって話であって、従来通りHTMLにちょっと 動きをつけたい程度ならjQueryが最適です。 jQuery以外のライブラリの質問はライブラリ総合質問所で質問して下さい。 ライブラリ以外の質問はJavaScriptスレで質問して下さい。 ■過去スレ (※vol3はありません。大人の事情でライブラリ総合質問所を乗っ取りました。) + JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net http://echo.2ch.net/test/read.cgi/hp/1465566635/ + JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.net http://echo.2ch.net/test/read.cgi/hp/1452081417/ jQuery ライブラリ 総合質問所 vol.4 http://peace.2ch.net/test/read.cgi/hp/1400313626/ ■関連スレ + JavaScript の質問用スレッド vol.120 + [無断転載禁止]©2ch.net http://echo.2ch.net/test/read.cgi/tech/1463914293/ + JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net http://echo.2ch.net/test/read.cgi/hp/1463395557/ JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net http://echo.2ch.net/test/read.cgi/hp/1465399470/ 最近javaScriptを独学で学んでいる者です 複数のul要素(同クラス名)の、子要素liの2番目に .before() でli要素を追加したいのですが、 var li = $('<li>').text('text'); $(ul.test > li:eq(1)).before(li); では:eq(1)のせいか最初のulの子要素にしか反映されませんでした。 このような場合はどのようにすれば全ての同class名のulに反映されるのでしょうか? jQueryは、最初の1つしか取り出せない。 複数は取り出せないから、 ul.test1 ul.test2 など、異なるクラスを、割り当てればいい >>3 これでできるよ。 var li = $('<li>').text('text'); $('ul.test > li:nth-of-type(2)').before(li); あとウソを付くやつがいるから気をつけてなw jQueryは複数の要素に適用することができる。 メソッドの効果(今回で言えばbefore)は複数の要素に適用される。 値を返すメソッドに限り最初の要素の値のみを返す。 $(ul.test > li:eq(1)).before(li); $('ul.test > li:nth-of-type(2)').before(li); 同じ構文なのに、上は1つで、下は複数になるのか? なぜ? >>6 同じじゃないじゃんw eqとnth-of-typeは意味が違うってだけ .fooが後述するh2要素をjQuery()で取得するのはどのように書けばいいでしょうか <h2>hoge</h2> <p class="foo">foo</p> <h2>hoge</h2> <p class="foo">foo</p> <h2>hoge</h2> <p class="piyo">piyo</p> >>8 これでいい? $(".foo").prev('h2').css('color', 'red'); 以下の場合上2つのh2が赤になる。 <h2>hoge</h2> <p class="foo">foo</p> <h2>hoge</h2> <p class="foo">foo</p> <h2>hoge</h2> <p class="piyo">piyo</p> <h3>hage</h3> <p class="foo">hage-foo</p> <h2>hoge</h2> <h3>hage</h3> <p class="foo">hoge-hage-foo</p> >>9 一つのセレクタで割り出すことは不可能ですか? セレクタにおける :nth-of-type(), :nth-child(), :eq() の違いを教えてください >>12 サンプルでも作って調べればわかるんじゃねーの? nth-of-type と nth-child は単なるCSSセレクタなんだから こことか見れば書いてあるだろ https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type >>13 検証してもわからないから質問しているのですが :eq()に触れてないのはなぜですか? >>14 :eqはCSSセレクタじゃないからなだけだけど? まずnth-of-typeとnth-childの違いを言ってみ 読むべきページは出したよね? >>16 英語は読めるかい? Because :eq() is a jQuery extension and not part of the CSS specification, >>17 jQuery拡張でも使えれば問題にしてないんですが >>18 >>13 で:eq()に触れてないのはCSSセレクタじゃないから だって話なんですが? >>19 CSSセレクタでないと都合が悪いのですか? >>12 - :nth-of-type() … 同じ要素タイプのグループ内におけるn番目の要素(インデックスは1から始まる) - :nth-child() … 全要素におけるn番目の要素(インデックスは1から始まる) - :eq() … 全要素におけるn番目の要素(インデックスは0から始まる) >>20 CSSセレクタじゃないとMDNに説明があるわけ無いだろw >>21 ありがとうございました >>22 MDNに載っている内容で質問しているわけではありません 質問文をよく読まれてはいかがでしょうか >>23 だからMDNに説明書いてあるんだから 読めって話だ。 まとめ「俺はMDNに書いてある事しか回答できません。:eqなんて知りません。」 どえでもいいけど、>>14 からの流れはMDNではぐらかしているようにしか見えないんだよな jQueryにelement.classList相当のAPIはありますか classトークンを配列で得るAPIを求めています >>28 普通にclassNameをスペースで区切ればいいだけだけど? そもそもclassListっていうのはclassNameに書かれた スペースで区切られた複数のクラスのうち特定のものだけ抽出したり 変更して再設定するのが面倒だから追加された機能なんだけど。 おそらくクラスの使い方を間違ってると思うよ。 それhasClass()とかでもっと効率的に書ける問題でしょ? >>29 hasClass, removeClass, toggleClassは全て知っています そんなに多くはないのですが、classトークンを配列で欲しい状況があります element.className.split(' ')しかないのなら残念です classListの代替機能がjQueryにあることを期待していたのですが classListはIE9では使えないからな 俺もjQueryにあるなら使いたいわ 俺がライブラリの開発者なら、 element.className.split(' ') で済むものを $(element).classNames() なんてメソッド作ろうと思わないな。 それはそれとして、どういうときに使いたくなるの? まずはあるかないかを答えてやればいいのに目的を聞いてくるあたり、jQueryに不利な情報は出したくない感が見えるな 少なくとも俺の知る限りではないんんだが そうやって使う目的をいわないでjQuery批判に 持っていこうとしている所がわざとらしいよなw 最初からそれが狙いみたいな。 それがバレバレだから使う目的を聞かれてるんだよ。 具体的にはclassトークン文字列を直接操作する場合に必要になります 例えば、下記では 1,2,3 の数値を参照することを求めます。 <p class="hoge-1">hoge</p> <p class="hoge-2">hoge</p> <p class="hoge-3">hoge</p> 「data-*属性で数値を分離すればいい」とする対案もあるでしょうが、 <p class="hoge" data-hoge="1">hoge</p> <p class="hoge" data-hoge="2">hoge</p> <p class="hoge" data-hoge="3">hoge</p> 既存コードを改修する場合に改修個所が多くてHTMLを書き換えるのが現実的ではないケースがあります 「何が最善か」は時と場合によります 「全てにおいて〜が最善」という事がなければ「は〜という理由で絶対に使わない」という事もないと私は考えています バッドノウハウと他人に評価されようが、使えるカードは出来るだけ取っておくのが私の流儀です その為には使えるカード(jQueryにclassListがあるのか)を予め知っておく必要があります 「これこれこういう理由でclassListは使わない」なアドバイスは有り難く頂戴しますが、それはそれとしてclassListの有無は答えて頂きたいのが正直な気持ちです 今、必要なのは「事実」であって「意見」ではありません 「使う/使わない」は各自が自由に決めればいい事であって他人に押し付けるものではない、と私は思います > それはそれとしてclassListの有無は答えて頂きたいのが正直な気持ちです うん。だからelement.className.split(' ')で取れるよって なんでJavaScriptでも手間変わらずに同じことをやれるのに jQueryにそれを求めるのだろうか? jQuery.eachとかは古いブラウザでは搭載してなかったから という理由で入ったんだぞ。手間変わらずに同じことができるなら jQueryを使わなくていいんだよ。 jQueryはDOM操作を関数型風に使うためのライブラリなんだから。 >>36 意味がわからん。っていうか答えになってない。 その話だけなら、$('p').attr('class') とかでいいだろ。 classList相当のものを探していたんじゃないのか? classListを使っても hoge-1 とかしか取得できない。 1, 2, 3 という数値を取ることはできない。 もしかしてattrでclassを取得できるっていうのが分かってないとかだろうかね? 例えばこんなことだってできる。 $('p[class^="hoge-"]').attr('class', function() { return this.className.replace('hoge', 'hage'); }); この答えで100%問題ないだろ?w って言ったら駄目だっていうんだろうな。 だからなんに使うのかを聞いてるのに。 >>36 > 例えば、下記では 1,2,3 の数値を参照することを求めます。 > > <p class="hoge-1">hoge</p> > <p class="hoge-2">hoge</p> > <p class="hoge-3">hoge</p> classって複数指定できるの知ってる? <p class="hoge-1 hoge-2">hoge</p> って書いてあったらどするの? 1,2,3 の数値を参照ってどういうこと? >>36 > その為には使えるカード(jQueryにclassListがあるのか)を予め知っておく必要があります あ、つまり、今すぐにどういうことに使おうか思いつかないが 機能を知りたいだけねw ならあるっていうのが答え。 できた時代から考えてjQueryを参考にしてclassListを作ったようなものだから。 https://api.jquery.com/category/manipulation/class-attribute/ classList.add → .addClass() classList.remove → .removeClass() classList.toggle → .toggleClass() classList.contains → .hasClass() 更に値としてコールバック関数が使えるなどjQueryオブジェクト(DOM要素コレクション)を 操作しやすく拡張されている。 「jQueryにはない」という意見しか出ないですね 残念ですが、自前で拡張する事にします 回答を下さった方、ありがとうございました ごめん 教えてほしいことがあります。 http://www.dotup.org/uploda/www.dotup.org948347.png.html ↑サイトが開かれるのと同時に開く確認ダイアログの中に、アフィリエイト広告を張り付けたいんだけど、どうやればいい? それとも、仕組み上無理なの? コード自体は、web上で公開されてるヤツで、いろいろいじってみてるんだけど、初心者にはよくわからん…… ↓どこをどういじればいいの? http://www.dotup.org/uploda/www.dotup.org948354.txt.html >>46 jQueryと関係ないのでこっちにどうぞ + JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net http://echo.2ch.net/test/read.cgi/hp/1463395557/ すみません、スレ違いでしたか…… 丁寧に誘導までしていただきありがとうございます あるinputが、TYPEが radio か text かを判定したいんだけど なにで区別すればいいですか? >>49 どこで区別するのかによる。 $('input:radio') 要素を選択するならこれ イベントハンドラで使いたいならば $(document).on(イベント, 'input:radio', function() {・・・}) というのもあり。 俺はあまりやることはないが、どうしてもイベントハンドラの中で区別したいなら $( "input" ).on('change', function() { if ($(this).is( ":radio" ) ) { ・・・ } }); とかいうのもありだろうし、isの代わりにthis.type === 'radio' でもいいかもしれない。 >>50-51 ありがとう。 $unko.attr('type') == 'radio' でできた 2chでたまにある下品な変数名って何なの? 自分が下劣な人間であることをアピールしてるの? 痛車に乗っている奴と同じで周囲と自分の感覚のズレに気が付いてないだけだろ 本人は面白いネタを披露しているつもりなのさ 小学生があの単語を連呼して喜んでいるのと同じ unko はラテン語で「ひとつの」を意味する単語だし メタ構文変数としては適切だと思うよ というか、日本語で読めるものを外国語で読む論理なら「nihon は英語では読めないからメタ構文変数」と主張できることになるんだが、明らかにおかしいだろ >>5 ものすごく遅くなりましたがみなさん回答ありがとうございました。 助かりました。 <form action="hoge.php"> <input type="submit" id="send" value="送信"> </form> $('#send').click(function(){ if (条件) { (処理) } else { return false; } }); と、送信でも条件によってフックしてhoge.phpへの移行を 阻止したいのですがこれってどのブラウザでもその通りになりますか? phpが先に実行される可能性はありますか? >>59 DOMを正しく実装しているブラウザであれば期待通りに動きます。 それはそれとして、対象ブラウザ全てで検証するのは基本だと思うのですが。 >>60 ありがとう。 この方が早いかと一瞬思ったのですが、後々考えたら 普通のボタンにonclickでfunction呼び出した方が見通しがいいかもしれませんね。 私の場合他人が見ることもHTMLだけ見ることもないので さほどの問題でもないのですが(たぶん)。 >>61 > 普通のボタンにonclickでfunction呼び出した方が見通しがいいかもしれませんね。 今はonclick属性は一般的に使わない。 あとreturn falseではなく、event.preventDefault()を使うのが標準的なやり方だ。 eventはclickのイベントハンドラの第一引数な。 それからその場合はformのsubmitイベントを捉えたほうが良い。 そうすればthisがformになるからformの中を参照するのが少し楽になる。 ついでだが#sendにイベントハンドラをつけるのではなくdocumentにつけて #sendで振り分けたほうが良い。僅かなタイミングだが イベントハンドラが有効にならない期間がある。 要するにこうした方がいいという話だ。 <script> $(document).on('submit', '#sendform', function(event) { if (!条件) { event.preventDefault(); return; } 処理 }); </script> <form id="sendform" action="hoge.php"> <input type="submit" value="送信"> </form> >>62 >event.preventDefault()を使うのが標準的なやり方 これだと何がいいのでしょうか? イベントの伝播で安全ということでしょうか? >>63 バブリングを止めない、という理解でいいんじゃないか jqueryプラグインの「mix it up」を使っていて、 さらにプラグイン「jquery.cookie.js」を使ってそれをクッキーに保存させたいと思っています。 ` sample.html <div class="style1"> <div> <div class="filter style2" data-filter=".a">青</div> <div class="filter style2" data-filter=".b">赤</div> <div class="filter style2" data-filter=".c">黄</div> </div> </div> <dl> <dd class="sort" data-sort="default">新着順</dd> <dd class="sort" data-sort="myorder:desc">価格の高い順</dd> <dd class="sort" data-sort="myorder:asc">価格の低い順</dd> <dd class="sort" data-sort="random">ランダム</dd> </dl> <div class="style3"> <div class="mix a">青</div> <div class="mix b">赤</div> <div class="mix c">黄</div> </div> ` ` sample.js $('.style3').mixItUp({ controls: { toggleFilterButtons: true, toggleLogic: 'and', }, animation: { duration: 0, }, }); $('.style2').on('click', function(){ $(this).toggleClass('style2b'); }); ` .style2のタグをクリックすると.style3の記事が絞り込み検索される仕組みです。 .style2をクリックすると同時に.style2bが付与され色が反転し、どのタグが選択されているか目視できるようにしています。 .mixにはdisplay:none;がかかっています。 このクッキーを保存して、ページが更新された場合に絞り込み検索および付与された.style2bが残っている状態にしたいと考えております。 独学で作成していて壁にぶつかっております。どうかご教授お願い申し上げます。 クッキーに、ページの状態を保存したいの? 絞り込み検索のキーワード・カテゴリ、 style2bが付与されたことを、保存すれば? >>67 そうです。 具体的なコードの書き方を教えていただきたいです。 クッキーの仕様・容量を、調べれば? データ構造は、[キー : 値] の辞書かな? >>69 いろいろと調べてもわからなくてここにたどり着きました。 document.cookie - MDN https://developer.mozilla.org/ja/docs/Web/API/Document/cookie 「jquery cookie」で検索すると、jQueryでクッキーを扱える、プラグインが一杯ある クッキーはjQueryで扱うべきものじゃない。 なぜならクッキーはDOMとは無関係だから。 それはjQueryが流行って質の悪いjQueryプラグインが大量に 生産されたときの負の遺産。いまどき使うべきじゃない。 「javascript cookie library」でぐぐったらコレが出てきた。 https://github.com/js-cookie/js-cookie starも多いしこれでいいんじゃね? クッキーを扱うjQueryプラグインはjQueryプラグインではなくて jQueryの名前空間に寄生しているだけ。 そもそも、今でもクッキーを使うのかな? 今は、WebStorage じゃないの? >>75 使うに決まってんだろ脳みそ沸いてんのかクソボケ野郎が <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 例えばdivのclickイベントで、3がクリックされたときに その次の4のdivを取得する方法を教えてください。 >>77 event.target.nextElementSibling ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる