jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptでDOM用ライブラリであるjQueryのスレです。
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
JavaScriptの質問は関連スレで質問して下さい。
■前スレ
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/
■関連スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/
+ JavaScript(ECMAScript)質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472401404/
+ JavaScript の質問用スレッド vol.131 +
http://echo.2ch.net/test/read.cgi/hp/1478053599/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/ >>357
あとでごちゃごちゃならないように、
良いコードの条件を言っておくわ
1. 「（俺が・初心者が）読めない」は理由にならない
2. 単語の長さは関係ない
3. 条件文が少ない。
4. ループが少ない。
5. 行数が少ない（ただし; で無理やりつなげたり、横100文字を超えるのはダメ）
6. 重複する単語やコードが少ない jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p,:has( #div1)+p')[0];
https://jsfiddle.net/eyg016m2/
あなたが小難しくないと思うコードを是非教えてくれ 一つ追加
なるべく少ない単語を使用する（複合語にしないということ） 重複したセレクタを削除した
jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p')[0];
https://jsfiddle.net/eyg016m2/1/ >>359
お前が書いたコード
'use strict';
var p = jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p,:has( #div1)+p');
p.each((i,p) => console.log(p));
修正後
var s = '#div1 p, #div1+p, :has(#div1) p, :has(#div1)+p';
$(s).each((i,p) => console.log(p)); >>363
後で扱いやすいように変数化しただけだから好きに改変してくれ
jQuery or $ もポリシーでどうとでも変わる程度の違い
それはともかく、>>315が小難しいといった人が書いたコードを早く見てみたいのだが $を使わずjQueryを使う人は、JavaScriptに慣れてない人だと思う。
ローカルスコープがよく分かってないんじゃないかな。
以下のように書けば、$はかならずjQueryになることが保証されるので
いちいち長い単語を使う必要がなくなる。
jQuery(function($) {
・・・
}
(function($) {
・・・
}(jQuery)); 本題とは関係ないところに反応して何がしたいんだ？
$('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p').each((i,p) => console.log(p));
for (let p of $('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p')) { console.log(p); }
こんなものは好みや流儀の違いであって「>>315が小難しい理由」にはなってない >>365
悪いが、両方とも知っている
jQuery を使用するのは検索性/可読性の観点からであって「$ をローカルスコープに閉じ込める方法を知らないから」ではない
>>358が指摘するように「単語の長さは関係ない」 単語の長さは関係ない。
だからこそ長いほうが可読性が高いわけじゃない。 "$" でgrep検索すると正規表現にもマッチしてしまうが、"jQuery" でgrep検索すれば jQuery だけが期待通りにマッチする
可読性は人それぞれ違うものなのでそこを議論するつもりはない
各々が読みやすい方を選択すれば良いわけで、言い換えれば、「あなたが好きな方を他人に強制する事」は出来ない
本題から逸れすぎているのでいい加減、話題を「>>314を実装する場合の小難しくないコード」に戻してくれ
>>315が小難しいというなら>>315の論理に沿ったコードも小難しいという事だ
あなたがたが書いたコードを俺のコードを元に作っているのだから、それも小難しいコードという事になる
では、小難しくないコードとは何なのだ？
俺はコードを出したのだから、そちらもコードを出してほしいのだがな > "$" でgrep検索すると正規表現にもマッチしてしまうが、
エスケープすればいいだけじゃね？ > 可読性は人それぞれ違うものなので
それは間違い。
人それぞれ違うものを"可読性"と言ってはいけない >>372
君は問題の本質を理解していない
/hoge$/ という文字列にも $("p") という文字列にも "$" で検索してHITしてしまうのが問題
/hoge$/ にはマッチさせたくない場合にはどうやって正規表現を書くかね？ 関係ないかもしれんが別の意味の$がマッチしてうざいときは$(とか$.で検索してるは >>375
では、jQuery.each や jQuery(function ($) {}) にはどうやってまっちするかね？
コード内の全ての jQuery を参照する $ を検索することが出来るかね？ それは、jQueryで検索すればよかろう？
> コード内の全ての jQuery を参照する $ を検索することが出来るかね？
できるんじゃねーの？
お前が出来ないって思って出したはずのものを
今ことごとく論破したでしょｗ ちなみに、jQuery.eachとは書かない。
$.eachと書く。その検索方法は>>376が言ってる通り >>373
可読性は主観だ
あえていうならば、「jQuery の方が jQuery である事を明示的に表しているから」だがね
それは主観的な問題で $ と jQuery の可読性が高いなんて誰にも断定できないだろう？
先程から枝葉にしか反論が来ないようだな
反論がなければ、「315が小難しい理由はない」と判断する > それは主観的な問題で $ と jQuery の可読性が高いなんて誰にも断定できないだろう？
「単語の長さは関係ない」の通り、可読性と単語の長さは関係無い
可読性の話じゃないんだから、どちらが高いか断定できないのは当たり前だろ jQueryよりも$を俺がすすめるのは、
タイプするのが楽だからだ。
もう一回言うぞ？
タイプするのが楽だからだ。
書く時の話であって、読みやすい（可 "読" 性）とは言っていない。
可読性に関係ない ＝ 可読性に違いがないのであれば
タイプするほうが楽な方が良いだろ？ それなら、「単語の長さは関係ない」から「単語の長さは短い方がいい」に訂正しろよ
変数名も1文字だけ使えよ 1文字の変数名ってすげー読みにくい
可読性は主観ではないらしいから他の皆も読みにくいんだろうな
読みにくい書き方をする理由がタイプ数が少ないだけなら俺にはメリットがないな 本題(>>314)を無視してどうでもいい枝葉にしか反論がないのは何故なんだ？
アホらしくなってきた > 「単語の長さは短い方がいい」に訂正しろよ
訂正しない。短い方がいいとは限らないからだ。
短いか長いかは関係なく、それがそのコードを書く人（修正する人）にとって
よく知られている単語（新参者にとっては知るべき単語）かどうかだ。
$はjQueryのコードを書く人にとってよく使われている単語で
$を知らずして、jQueryのサンプルコードを読むことは出来ない。
だから明らかに、jQueryのコードを書く人は$の意味を知っている。
だから、前提をつけて「よく知られている単語の場合は短い方がいい」となるが
それはあくまでタイプするのが楽であるという意味であって、可読性の話ではない 単語の長さは関係ないと言ってるのに、
長い方がいい、短いほうが良いと、決めつけたがるんだよなｗ
ほんとバカやで 略よりも長いほうが明示的だと思ったんだろう？
正確に言うならば、$は略ではなく短い別名だが。
可読性で重要なのは意味がわかるかどうかであって
言い換えると誰でもその単語の意味を知っているか？
という話なんだよ。 略称がいいか正式名称がいいかの違いに標準を求めるのが間違ってる 標準を求めるってなんのことだ？
（単語の長さに関係なく）よく知られている単語か、
そうでないかの話しかしてないぞ >>392
知ったうえでどちらを使うかは自由だろ
お前が主張する「単語の意味を知っているか」は知っているなら$を使うはずだ、といいたいんじゃないのか？ >>393
どちらでもいいのであれば、
タイプが短いほうが楽だろう？ >>394
それがお前の中で「標準を決めている」といってるんだよ
タイプ数が重要じゃない人の事も考えろ >>395
タイプ数しか違いがない問題なのに、
何をお前は基準にしてるのだ？ 検索性は変わらないことを実例を持って示した。
jQueryのコードをメンテナンスする人で$を知らない人はありえない。 「優先順位の違い」とか「単語の好みの違い」とか、いろいろあると思うけどな
JSと略する事を嫌ってJavaScriptと正式名称を書きたがる人もいれば、短く書くことをの好む人もいる >>398
例えば、var a = $; なんてコードに先の事例はマッチしないよな
揚げ足取りじゃなくて俺は「全てのパターンで $ を検索可能か」で考える
jQuery なら少なくとも$よりも正確に検索できる
「分かりやすさ」は知っているか知らないかの問題じゃない
整数型の変数を定義する場合に i と integer のどちらを採用するか、レベルのもの
それから、俺にとってはタイプ数は「どうでもいい」 >>400
それは揚げ足取りだなｗ
自分でそう思ってるから、否定するんだろ
$で検索すれば全部見つけることが可能。
余計なものが多すぎるなら、grep -v ででも消せばいい
はい論破ｗ >>400
> 整数型の変数を定義する場合に i と integer のどちらを採用するか、レベルのもの
え？ お前、みんながiを使うような緒齧ﾊで、
integerって名前の変数を定義するんの？ｗ
iはイテレータとしてよく知られているか単語だから
みんなiを使うんだよ？ >>401-402
検索性は高い方が好ましい
jQueryが$よりも検索性が高い事は誰にも否定できない
お前とは評価基準が違うだけなんだが、唯我独尊な奴だな > jQueryが$よりも検索性が高い事は誰にも否定できない
さっきからずっと否定しているが？
っていうか、そこまで検索に頼るっておかしくね？
どこに何がわからないから検索してるんだろ？
設計レベルでおかしいってことだよ。
jQueryはDOM操作をしている所と言い換えることができるが、
俺は「DOM操作をしている所」という条件で検索することは殆ど無い。
検索するとしたら特定の変数名やクラス名で検索する。 いや、こう書いても意味がわからんか？
変数名iはイテレータの略としてあちこちで使われるが、
変数名iで検索することはないだろう？
変数名iを検索の目的として選ぶことはないから。
それと一緒だよ。
jQueryという単語を検索したいなんてことはまずない この人は思い込みが強すぎて他人の意見を正しく理解できないんだな
無駄に改行を入れて冗長な文章になってるのもマイナス JSスレで散々見た流れだな
1. 回答をけなす
2. コード付で反論される
3. 初めにけなした内容では論破できないので、「取っつきやすそうな理由」を見つけてけなす
けなす内容は何でもいい
本題から大幅にずれても関係ない
とにかく、相手を論破出来れば何でもいい >>314
var answerFlag = false;
// #div1 または、p
$("#div1, p").each( function(index, elem) {
if ( true === answerFlag ) { // #div1 の次の要素
console.log( index + " : " + $(elem).text() );
return false; // each から抜ける
}
if ( "div1" === elem.id ) {
answerFlag = true;
console.log( index + " : " + $(elem).text() );
}
}); >>402
ループ変数iって読みにくくない？
そこもキッチリ名前を付けたほうが読みやすいよ ループ変数名よりブロックの長さやネストの深さの方が問題
そこがちゃんとしてればijkでなんの問題もない iは分かるけどｊは絶対止めたほうがいい。普通に読み間違える
使うのはいつもikmだわ 結局、出たコードは>>409だけで「315が小難しい理由」は分からず仕舞いか
時間の無駄だったな 蓋を開けてみれば、315のコードが圧倒的にシンプルで文句のつけようがなかった >>414
だいたいいつも男なんて 甘ったれで情けなくて 315のコードに少し手を加えた程度のコードだからだろうよ それもあるけど、>>315の文章を否定する具体的な意見が一つも出てないからだと思うな あえて否定するなら、>>315のいう「3つのパターン」が「4つのパターン(>>362)」だったぐらいか。
とはいえ、それもケアレスミスレベルで「小難しい」と断定するには程遠い。 >>314の要望ならこれでいいじゃねえの？
$('div').each(function(index, el) {
var $p = $(this).children('p');
if (!$p.length) { return; }
console.log($p.eq(0)[0]);
}); >>423
#div1 はどこへ行った？
それから、>>314ではdiv要素しか使ってないが、条件は「#div1の後方」であってp要素の親がdiv要素とは限らないんだが
いずれにしても、>>362よりシンプルに書くのは不可能な気がする :has(何か) p って body 内の p 全部にヒットしない？ >>425
「何か」の制約を受けるのでそんな事はない。
疑問に思ったことは自分で確かめろ。 >>424
console.log($(this).closest('div')[0], $p.eq(0)[0]);
これでどのdivの中のpなのかが参照できるだろ？ >>427
君は要件を勘違いしている
>>314の「div1から後方に探索して、最初に現れる<p>」を読め
「div」じゃなくて「div1」と書いてあるのは分かるか？
君のコードは無関係な要素にマッチする
https://jsfiddle.net/4majn0vf/ あるIDから深さ優先で、後方に探索して、最初に現れる<p>を取得せよ
このクイズを採用時のテストにすれば、ほとんど正解者はいないような気がする >>314 は TreeWalker とやらを使えば簡単そうだが
（jQuery その手のやつはないのかな） >>429
$("p")を取得
.each()でそれぞれのparentsの数を数える。最も深い深度を取得
forで最後から回して最も深度のの中から最初に現れたものを取得
スマートさの欠片もないけど、楽勝だぞ >>431
>>428の target3, target4, target5 にはどうマッチさせる？ >>430
可能だが、4パターンのコードを書く必要があるので、君が簡単と感じるかどうかは分からんぞ >>362は無関係な要素にマッチする事が発覚したので修正
https://jsfiddle.net/eyg016m2/4/
しかし、今の今までこの事実に気が付いて指摘した人が一人もいないとは… >>434はコメントがおかしかったので修正( <p>not target1</p> -> <p>target1</p>)
https://jsfiddle.net/eyg016m2/5/
ちなみに、>>409は要件を満たしている
https://jsfiddle.net/ayktj45t/1/
他で要件を満たしているコードはない >>430
TreeWalkerはjQuery APIに存在しないと思うが、フィルタ的な意味ではjQuery#filterが近いといえなくもない
TreeWalkerを使う場合、Element#matchesを使えば多少は楽になるが、肝心の :has() の実装が壊滅的なので親要素の探索が手間になる
http://caniuse.com/#feat=matchesselector
http://caniuse.com/#feat=css-has
jQuery#is を併用すれば楽が出来るが、>>435でやっている事をTreeWalkerに置き換えただけのコードとなる
https://jsfiddle.net/8yLzfzud/ 変なコードを書かなければいけないような構造にしなければいい お疲れ、>>409はjQueryでfindIndexを使えれば割と簡単に書けるよな
https://jsfiddle.net/ayktj45t/2/ >>431の実装を試みたが、とんでもなく複雑で諦めた
皆、すごいな >>437
こんな仕様が普通に出てきたら泣くｗ
これはクイズみたいなもんだと思うぞ 技術力の差が雲泥だな
いい加減な文句いってた奴が一掃されてる >>432
なんでそんなこと効くの？要件にないでしょ？ >>314
の流れ読んでないけど
＞div1から後方に探索して、最初に現れる<p>を求めたい
後方に検索ってp#p4のことじゃないの？
>>314だと見つからないと思うんだけど
<p id=p3></p>
<div>
<p id=p4></p>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div> <div id="div0">
<div>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div>
</div>
にできんのか？超簡単だぞ
>>437
こんなんなる前に普通は手を打つよな 俺の感覚だと上の方に検索するとしか思えないんだけど・・・
まぁ回答者が質問者を忖度してるなら、何も言わないけどね >>444
>>314のいう「後方」とはテキストエディタで "<p" を検索した際に #div1 よりも後方検索されるp要素全て
グループ分けするならこう
- #div1 の子孫要素
- #div1 の弟要素
- #div1 の親/祖先要素の弟要素
- #div1 の親/祖先要素の弟要素の子孫要素
>>435はセレクタを利用する事で対応したので簡単なコードに見えるが、内部動作的にはかなり複雑 >>447
>>314の一つだけある <p></p> の位置を見ればわかると思うんだが…
「親の弟の子要素」も後方に含む >>314の<p></p>は対応しなければならないとして、「div1やdiv2にも<p>が有る場合にはそちらを検出」とあるので最低でも3つのパターンに対応しなければならない
彼(314)の中ではDOMツリーの頭になってなくて、テキストエディタで後方検索しているイメージなんだと思う
■ケース1
<div>
<div id="div1">
<p></p>
<div id="div2"></div>
</div>
</div>
■ケース2
<div>
<div id="div1">
<div id="div2"><p></p></div>
</div>
</div>
■ケース3
<div>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div> >>451
あなたが>>314なら今までのレス全てに目を通して結果報告なりお礼なりしなさい
これだけ騒がせておいて「そういう意味です。」で終わらせるつもりなら厚顔無恥というほかない >>447
俺（うち）の感覚だと後方と言えば普通下だが
質問者が出てこない限り
と思ってたら
>>452
全くだな
まさか今まで静観してたわけではないよな
だとするととんでもないぞ >>450に異論はないが
>>451
質問者ならはっきりしてくれ
(1)「後方」とは上から下なのか、下から上なのか
(2)「最初に」とは一番上なのか、下なのか
(3)「div1やdiv2にも<p>が有る場合にはそちらを検出」とはdiv1を先に検出で間違いないか
(4)>>445のようにHTMLの構造を変えることができるか
(5)idのついてないdivにidをつけることは可能か htnlの構造変えて楽勝なら一旦jsで変えればいいんじゃないか >>454
>>450が真なら>>448も真だよ
「>>448が適合するp要素群の中で一番初めにマッチするp要素を返す」仕様が正しい
>>435-436,438に要件を満たすコードがあるので参考にしてみては？ >>409
は、jQueryがマッチした要素を、深さ優先順で並べることを、使ったやり方 ■ このスレッドは過去ログ倉庫に格納されています
