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/ >>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がマッチした要素を、深さ優先順で並べることを、使ったやり方 >>435-436もそういう意味では同じだな(436はTreeWalker依存だが)
将来的にSelectors Level 4が実装されれば、もっと簡単に書ける
document.querySelector('#target-1:matches( p,~p),:has( #target-1)~:matches(p,* p)');
jQueryにも早く取り込んでほしいものだが、未だに:has()がjQuery Extensionsに分類されているところを見るにブラウザが実装し始めてから後追い実装しそうだな ネイティブ実装的には>>435のアルゴリズムを流用して、document.evaluateを使用するのがお手軽だな どんどん楽になっているようで
どんどん新しい技術が増え続ける
どうにもならんのかね 言語が新しくなっていくのはJavaScriptに限った話ではないがな
新仕様についていけないなら古い仕様でいつまでも書いていてもいいけどね(JavaScriptは後方互換性には手厚いから) まさか20年も置い続けることに鳴るとは思わなかったゾ・・・ :matches()は皆が待ち望んだ疑似クラスだと思うのだが、どうして増える事が不満なんだろう
「年齢的にもう新しい事を覚えるのはきついからこれ以上増えないでくれ」的な愚痴？
探求心がなくなった時点で、技術者としては一線を退いた方がいい時期だと思うが フロントエンドは新しいのがバンバン入ってくるわりには
粗製乱造というかなんといかこりゃスマートだわ参りましたってプロダクトが無いよね JavaScriptはかなり特殊な立ち位置にいるから、お前(464)の感覚がずれてるだけじゃないの 「スマートだわ参りました」がお前は誰と戦ってるんだ状態だが、イテレータは「上手い妥協点を見つけたもんだな」と感心したわ 新しい仕様が増える事に不満を覚える理由が「粗製乱造」なら「ぐだぐだ言ってないで、覚えろ」とどやしつける
お前が仕様をどう感じようが、覚えない理由にはならん ＞お前(464)の感覚がずれてる
この書き方をする君の方がよぽどずれてると思う >>463
そういうのは大体フレームワーク化されている
で、下手したら名前がバッティングして大変なことに >>456
>>450が真なら>>448も真だよ
どうでもいい
レス相手間違えてないか？ >>455
他に影響出たらどうすんだよｗ
大迷惑極まりないな
後々面倒だし
上で書かれてるが条件によってはfirst()かlast()で十分な可能性もある、が
なんにしろ質問者はもう来そうにないからこれ以上はムダだな 要件を確認している人に答えて「どうでもいい」といわれてもな
>>450で理解できないからそんな質問(>>454)をしているのだろうに >>472
>>450は十分想定内であって質問者への確認とは話が別
理解もなにも最初から>>450のつもりだったが読み違いでは？
別人のレスと混同してるとか 質問者本人じゃなきゃ答えじゃないからどうでもいいわな 探索で、前方/後方は、forward/back で、back は遡る意味だから、紛らわしい
正しくは、
順方向/逆順(遡る)か、
先頭から末尾へ/末尾から先頭へ >>473
要件が分かってないから質問しているわけだよな
>450で十分理解できるのにわけ分からん補足要求してるから横から教えてくれただけだろ
もっといえば、>314から>450の理解に至ることは十分可能だったが、先日からおかしな方向に解読して回答に文句をつける奴が多すぎる
当人の読解力不足を「質問書本人じゃなきゃ答えじゃない」と言い訳されても困る jqueryって死ぬ気で一ヶ月やれば簡単なものは閉開メニュー作れるようになると思うけどそれ以上のものを作るとなると死ぬ気で４ヵ月やっても怪しいと思う
参考書完璧に覚えただけじゃまだ作れないものあると思うけどどうすればいいの？ >>476
まだ言ってるのか
>>314の時点で>>450はすでに想定と言っておろうに何が不満なのだ？
質問者がはたして>>450で間違いないか確認することは誤ったことではなかろう
>>451でさえ本人か危ういし質問者本人かの問いに答えてないしなりすましも考えられるし
そんな食いつくほどのことかね 依頼者はコードに詳しいわけではなくむしろな無知な場合が多い。
うちらが普通に使ってる言葉がそのまま通用するとは限らない。
思わぬ行き違いや思い込みを防ぐために要件を念入りに確認することは大切。
自分がそう思ってても質問者が必ずしもその意図で書いてるのかは質問者本人でないとわからない。
もっともIPもなくこの流れになっては本人ですと書かれても信憑性に欠けるが。 面倒だから探索範囲をdivでくくれや
HTMLが担当別なら頼み込め
コード書くのも親切だがあんな状況になってることからしておそらくわからんだろ >>478-479
気持ちは分かるし、確認行為が重要な事は認めるが、ぶっちゃけ頭が固すぎなんだよ
>314から>450の3つのケースが導き出せるなら多少の語彙の拙さは柔軟に考えれば結論が出る事だろ
確認という意味なら>>454の「上」「下」がテキストエディタで見たときの「上」なのかDOMツリーで見た時の親要素の意味での「上」なのか分からん
まあ、質問者に分かる意味でいうならテキストエディタの意味での「上」だろうが、念を押すなら「確認」が必要だろうな
ところで、<div id="div1"><div id="div2><p></p></div></div> なら上下関係が全くなくなるが、それも「確認」が必要だと思うか？
で、テキストエディタとしての上下なら
(1) 下
(2) 一番上
(3) ケースバイケース。div2の上にあるならdiv1直下を検出し、div2の下にあるならdiv2直下を検出。
という回答になる事がなぜ分からない？
(4), (5) に関してはdiv1配下とdiv1外では明らかに構造が違うし、他人のサイトに適用したいのか、自分のサイトに適用したいのかでも変わるし、ぶっちゃけ最終目標次第で変わる
最適解は可否ではなく、目的で決まるからまじめにやるなら「最終目標」を先に聞く方がいいと思うがね >>481
DOMツリーの上下とテキストエディタの上下って同じじゃあないの？ >>477
別にどうも線でいいと思う
難しいものを作っていく内に技術が手につくので、それをもとに新しいものを作り出すことができるようになる >>481が頭に浮かんだとしても上か下かは必ずしも明確ではない
それを確認したということだろ
仕事の手順として普通のことを一人が粘着してるだけ
上に書かれてる通り質問者の明確な意図を確定できないから続けても無意味 すまん、アンカミス
>>450ね
それが"思う"で話進めても無意味
よって終了 >>486
「div1から後方に探索」で十分意味が通じると思うが >>477
普通のウィジェットは、jQuery UI にあるだろ？ Edge でテストしていますが、ブラウザ内の<iframe>に、
2chのHTMLは読み込めて、表示もされますが、
そのHTMLが、クロスドメイン制限により、jQueryで取得できません
2chのHTMLを、ブラウザ内に読み込んで、DOMを解析したい。
やり方を教えて >>491
phpでローカルに読み込んでから取得すれば？ >>252
の「こらこら団報告書生成」ツールを、ピラフがPowerShellで作ったけど、
Windowsに限定されるから、JavaScriptでも作ろうかなと思って
サーバーを立てていないと、JSONPでもダメだった
ブラウザからのクロスドメインは難しいから、
YQL (Yahoo! Query Language)のサービスを使って、クロスドメインを可能にする、
jquery.xdomainajax.js プラグインしかないのか？
何か他に、OSSのライブラリは無いかな？
dojox にあるのか？ なんでそんなめんどくさいことをしてるのか分からん
phpのfile_get_contents()で瞬殺じゃん >>482
DOMツリーに二次元的な意味はないから上下の概念もない
>454のいう上下が「親子」なのか開発者ツールでDOMツリーを展開した時の上下の位置関係なのか分からないって事とでしょ
「確認(>454)」の「確認(>481)」に対して答えがないので、実際どういう意味だったのかは>454だけが知るところだろうね ツリーと言ってる時点で上下あるじゃんｗ
ディレクトリツリーだって上あるだろ ディレクトリツリーで上とか下とか言っちゃう人なのか DOMで上下なんて言わんから気持ちは分からんでもない
DOMツリーだって開発者ツールがたまたま上下に展開しているだけでただのイメージ図だしな >>498
エクスプローラー起動してみ
↑ってボタンが有るだろ >>501
それは親ディレクトリに移動の意味だよね
「上=親」の認識でいいの？
エクスプローラとDOMを同一視するのにも疑問はあるけど > それは親ディレクトリに移動の意味だよね
あえていうなら、[上の階層へ移動] の意味の [上へ] だな [↑] ボタンが「上」なら [←] ボタンは「左」なの？ >>497
DOMでは上下と前後は同じ意味と思うが >>504
前、後ろだろ？
どっちが前かって？
ビデオのリモコンでも見るといいよｗ DOM 仕様では階層関係に上（above や upper）や下（ below や lower ）という語が使われることはないな
常に親子か子孫先祖 仕様が読めないから「上」や「前」と書いてるのだと思うよ
既に何人かで齟齬が出ているし、質問者と>>454の間でも認識違いが生まれるだろうね >>454の(1)は質問者に不安だったから上下と書いたまでで親子関係ではない
その前の探索の流れが深さより方向性がでてたから
素人的に前後はとらえようによってはどちらにでも取れる
上下なら画面で見たままなのでそう表現しただけ
親子は(3)で書いてある
もっともそれらも曖昧ではあったな https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js
ブラウザからのクロスドメインは出来なかったが、
jqueryのプラグインの、xdomainajax.js を使ったら、
YQL (Yahoo! Query Language)のサービスを使って、2ch のHTMLを取得できた
ただ、xdomainajax.jsは、非推奨のsuccess を使っている。
fork して、deferred.done/fail に改造した物はあるかな？ >>511
そこまで分かっているなら .then() で書き換えればいい
>>1の4行目を読んで出直してきなさい >>511
自己レス。
結局、jquery.xdomainajax.js を使わず、
jQueryから直接、YQL を使って、2ch のHTMLを取得できた
var url = "http://hayabusa6.2ch.net/test/read.cgi/linux/1479499953/6";;
// 全体の設定
$.ajaxSetup({
data: {format: 'xml'},
timeout: 60 * 1000
});
var YQL = 'http://query.yahooapis.com/v1/public/yql?callback=?',
query = 'select * from html where url="'
+ url + '" and xpath="*"';
$.ajax( "http://query.yahooapis.com/v1/public/yql?q="; + query )
.done(function(data) {
var jqObj = $(data).find('dt');
console.log('jqObj.length = ' + jqObj.length, '\n', jqObj);
})
.fail(function(data) {
console.log('data');
}); >>273のアドバイスは徹底放置か
作り終わるまで延々と質問しそうだな、この人は よく見てなかったけどdatで取得してないの？html取得してるの？アホなの？ dat？ 意味が分からない。
漏れは、2chのHTMLを取得して、その中の特定のタグを、取り出している
2chのHTMLには、2種類あって、<dt> があるものと、
[data-id=999] のように、レス番号で取り出すものがある >>516
普通はdatファイルからスレを操作する
htmlファイルから操作するアホはおらん
このスレのdatファイル
https://goo.gl/B1I8Ge >>252
の「こらこら団報告書生成」ツールも、ピラフがPowerShellで作ったツールも、
2ch からHTMLを取得して、正規表現で、特定のタグを抜き出している
datファイルは、知らなかった よろしくお願いします。
画面上に常に表示するメニューで各アンカーにスクロールするようにしたいです。
○px下がったら下から「上に戻る」ボタンを出すjqueryを元にちょっと修正してみたのですが、画面リロード後の動作が
うまくいきません。
1.スクロールして少し下がったら出てくるようにしたいのに最初から出てる。(一度下げて上に戻すと消える)
2.リロードして1回目のクリック時だけスクロールしないで移動してしまう(するするっと動かないでぱっと移動する)
また、リロードしてすぐ1回目のクリック時だけ上余白が効かない(var headerHight分下がらない)
以下ソースですが、どこを修正したらいいでしょうか?
長いと怒られたので次に記載します… >>519
コードはjsfiddleにでもUPしてくれ
複数レスにまたがってコードを分割して投稿するのはレスの無駄だから 前半
// JavaScript Document
$(function() {
var showFlag = false;
var topBtn = $('#ri-menu');
topBtn.css('bottom', '-50px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'right' : '10px'}, 200); }
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'right' : '-200px'}, 200);
}
}
}); >>525
ReferenceError: $ is not defined になっている上にHTML/CSSがないので動かない
$('#ri-menu') が存在しないからな
[JavaScript] ボタンを押して jquery.js を読み込むのは当然として、諸々を動くコードにしてくれないかね >>526 さん
返答ありがとうございます。
jsfiddleの使い方がよく分かって無いのでちゃんとなっているかどうか不安ですが…
html部分はどの程度貼り付けたらいいのでしょうか?
とりあえず、そのボタン部分とcss、移動先は貼りつけました。
あと、[JavaScript] ボタンを押して jquery1.9.1 を選択してみました。(実際は1.10.1使ってます。)
https://jsfiddle.net/x01yb2ga/6/
これでRUNをクリックしたら、何となくですけど同じような現象になりました! ■ このスレッドは過去ログ倉庫に格納されています
