X



jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2016/11/02(水) 11:51:34.33ID:???
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/
0613Name_Not_Found
垢版 |
2017/05/28(日) 13:12:19.54ID:???
>>612
hiddenを使うこともできるし、jQueryを使えば
各要素に関連したデータを持つための
data()メソッドというものがある
0615Name_Not_Found
垢版 |
2017/05/28(日) 17:01:37.90ID:???
>>610
たびたびどうも。
教えていただいたのを試してみましたが、自分ではできませんでした。
すみません・・・

セレクタの
$(this)...

$('+p',this)...
をまとめて記述する方法ってないのでしょうか?
thisがあると別個でなければ駄目とかなんですかね?
0617Name_Not_Found
垢版 |
2017/05/28(日) 22:44:24.40ID:???
>>610ではないが「持ってきたデータを変数に代入しておいて使ったら?」がなんでスルーされてるかわからん
データが膨大でできないとか?
0620Name_Not_Found
垢版 |
2017/05/29(月) 14:17:36.01ID:???
>>609は「情報は横並びで持っている」というが、どこに持っていて、どこまで理解していて、何に悩んでいるのか、が不明なので答えようがないな。
回答よりも質問の不備が目立つ。
0621Name_Not_Found
垢版 |
2017/05/29(月) 14:28:26.47ID:???
>>606
そもそも、クリックされた要素はセレクタで指定出来ないわけだが、thisとセレクタを混同してないか?
jQueryオブジェクトを統合したいならadd
https://api.jquery.com/add/
0622Name_Not_Found
垢版 |
2017/05/29(月) 17:09:39.94ID:???
>>620
セレクトボックスを作成する時の
Arraylist(サーバーから取得した値)に、
社員番号、名前、メールアドレス、電話番号を持ってるという事です

そのArrayListをforeschして、社員番号をセレクトボックスのオプションのvalueに
名前をテキストに表示して作っています。

せっかくメールアドレスも電話番号も持ち合わせてるのですが、
セレクトボックスで値を変えるたびにajaxで社員番号をキーにメールアドレスと電話番号を取得するのは
イケてないのかなぁと思ったんです。
うまく説明できなくてすいません。
0623Name_Not_Found
垢版 |
2017/05/29(月) 17:13:22.79ID:???
>>613
さんのカスタムデータ属性が使えそうだな!と思っています。
0624Name_Not_Found
垢版 |
2017/05/29(月) 18:37:35.30ID:???
Arraylistが全データなんでしょ?
それなら>>610の言うようにキャシュしておいて使えば済むと思うが
0625Name_Not_Found
垢版 |
2017/05/29(月) 18:41:17.43ID:???
あくまでArraylisが他で更新されないことを前提でね
もしも他での更新をリアルタイムで反映させたいなら毎回持ってくればいいんじゃないの?
0626Name_Not_Found
垢版 |
2017/05/29(月) 20:13:12.54ID:???
わからないのに知ったかぶりして回答する奴大杉
0627Name_Not_Found
垢版 |
2017/05/29(月) 20:32:34.61ID:???
>>622
そのセレクトボックスは単一選択だよな?
各optionにvalue="数値"(またはindex())で、それ取得してそのままArraylistのインデックス

$('@').change(function(){
Aを実行
});

あとdata()はjQueryがキャッシュ使うのでリアルタイム性には注意な
0629Name_Not_Found
垢版 |
2017/05/31(水) 08:44:05.07ID:???
>>625
を理由に毎回Ajaxで持ってくるようにします。
その方が組むのが楽ですね。


私がwebに初心者すぎるのが原因かと思いますが
キャッシュしておいて…みたいなのは
サーバ側でキャッシュデータとして登録しておいて
Jquery側のファンクションでキャッシュデータの読み込みができるってこと?
キャッシュデータの読み込みをajaxでやるっていうこと?
画面のhiddenに持つってことではないですよね?(これはいや)
0630Name_Not_Found
垢版 |
2017/05/31(水) 21:00:37.39ID:vyKeYlnl
プラグイン作りの勉強をしています。
基礎的なことなのですが、プラグインの関数内で
呼び出し元のIDを表示するにはどうすれば良いのでしょうか?

$.fn.test = function() {
 var id = $(this).attr('id'); //testを取得したい
 alert(id);
};
$('#test').test();

これでは駄目でした
0632Name_Not_Found
垢版 |
2017/06/01(木) 01:10:35.39ID:???
>>631
これだと確かに実行されるのですが、自分の環境だと駄目です。(undefinedになる
環境と言ってもchromeで実行しているだけですが・・・
(あと、jQueryのバージョンを変えても同じです
0633630
垢版 |
2017/06/01(木) 01:33:14.98ID:???
わかりました。もしかしてプラグインって<head>内に入れちゃ駄目なんですかね?
>>630のソースを</body>の前に書いたらアラートで「test」が表示されました。
0635630
垢版 |
2017/06/01(木) 02:07:47.52ID:???
>>634
ほんとですね・・。
(function($) {})(jQuery);
で括っていたのが良くなかったのかもしれません。
もう少し基礎から勉強します。ありがとうございました。
0636Name_Not_Found
垢版 |
2017/06/01(木) 03:59:08.74ID:???
> (function($) {})(jQuery);
> で括っていたのが良くなかったのかもしれません。
まったく関係ない

プラグインの作成自体はよっぽど変なものでない限り、
jQuery読み込みのあとならどこでも良い。もちろん<head>でもよい

ただ<head>に書くなら(正確に言うならば<タグ id="#test">登場以前に書くなら)
$(function() {
// Document is ready
});
を使わないとDOM構築前に実行されてしまうから見えないだけ
0637Name_Not_Found
垢版 |
2017/06/01(木) 04:04:15.17ID:???
あとな、例外的なプラグインもあるからあえて言わなかったんだが、
$('#test').test(); だけではなく、$('.test').test(); こういう風に
複数の要素にマッチする場合でも逆に全くマッチしない場合でも動くように作るのが良い
そしてチェーンできるようにするべき

だからこのサンプルのように、複数の要素に対して処理を適用してreturn thisするのが王道
※プラグインにおいてthisはDOM要素ではなくjQueryオブジェクトであることに注意
つまり>>630のように$(this)とする必要はない

https://learn.jquery.com/plugins/basic-plugin-creation/

$.fn.greenify = function() {
 this.css( "color", "green" );
 return this;
}


もしくは、複数の要素に対して一要素ずつ何かの処理を適用したい場合は、
eachでループするこっちのパターンもおなじみ

$.fn.myNewPlugin = function() {
 return this.each(function() {
  // Do something to each element here.
 });
};
0638630
垢版 |
2017/06/01(木) 11:46:11.25ID:???
>>636-637
詳しくありがとうございます。
$(this)としていたのは、ID名をどうやって取得するのか?と思ったもので。
それで
var id = $(this).attr('id');
こういう書き方自体は間違いではないのかな?っと。

var id = this.attr('id');
こういう書き方の方が良いんですかね。
0639Name_Not_Found
垢版 |
2017/06/01(木) 12:56:47.19ID:???
>>638
この場合はthisでええんやで$()は不要
通常のDOMオブジェクトではなくてjQueryオブジェクトで参照されるから
0640630
垢版 |
2017/06/01(木) 13:08:20.97ID:???
>>639
わかりました。ありがとうございます。
引き続き勉強していきたいと思います。
0641Name_Not_Found
垢版 |
2017/06/01(木) 20:19:30.60ID:???
>>629
どうにでもできるし、楽さはどれもさほど変わらない
自分がどうしたいかだけで毎回取得したいならそうすればいい
常に最新データを求めるならそうすべきで、その必要がないのなら冗長
サーバサイドならPHPの方が楽だしセキュリティ上有利
0642Name_Not_Found
垢版 |
2017/06/01(木) 22:32:10.84ID:???
tableタグでクリックされた要素の次に来る要素をセレクタとする場合、
trをまたいでいる場合の簡単な指定方法はありますか?

↓でthをクリックしたらtdを選ぶ。としたいです。
<table>
<tr>
<th>...</th>
</tr>
<td>...</td>
<tr>
</tr>

</table>
0643Name_Not_Found
垢版 |
2017/06/01(木) 23:02:43.42ID:???
> クリックされた要素の次に来る要素をセレクタとする場合、
セレクタってなんですか?
0644Name_Not_Found
垢版 |
2017/06/01(木) 23:51:03.91ID:???
>>642
tdの位置が明らかに文法違反
セレクタ云々も用語の不理解が見られる
>>621と同じ指摘をする必要がありそうどな
0645Name_Not_Found
垢版 |
2017/06/02(金) 00:11:08.51ID:???
>>642
>>644のいうように文法おかしいけど
tableを起点で参照
$(this).closest('table').find('td');
親のtrから参照
$(this).closest('tr').next('tr').find('td');
0646Name_Not_Found
垢版 |
2017/06/02(金) 00:19:39.93ID:???
>>645
素晴らしいセレクタありがとうございます。
0647Name_Not_Found
垢版 |
2017/06/02(金) 00:37:29.68ID:???
jQuery APIの事をセレクタと表現してるのか
セレクタの意味を調べ直すべきだな
0649Name_Not_Found
垢版 |
2017/06/02(金) 23:01:56.26ID:???
ここを見たぞ
ここって書いてある
0650Name_Not_Found
垢版 |
2017/06/02(金) 23:03:25.68ID:???
>>642
HTMLはjQueryより難しいからな
よく見直せ
0651Name_Not_Found
垢版 |
2017/06/09(金) 21:25:28.63ID:???
>>639
便乗質問なのですが、$(・・・)のいらないthisだけでいい「この場合」とはどういう場合をさすのでしょうか?
0654Name_Not_Found
垢版 |
2017/06/11(日) 12:26:03.87ID:???
>>653
jQuery.prototype.functionName
jQuery.fn.functionName
0655Name_Not_Found
垢版 |
2017/06/11(日) 15:02:53.69ID:???
わざと難しくしてるか説明できないか
いずれにしろ性格悪いのは間違いなさそう
0656Name_Not_Found
垢版 |
2017/06/11(日) 16:10:12.41ID:???
$.fn.myMethod = function() {
console.log(Object.getPrototypeOf(this));
};
0657Name_Not_Found
垢版 |
2017/06/11(日) 23:21:14.27ID:???
説明できないならそう書けばいいのにな
0658Name_Not_Found
垢版 |
2017/06/11(日) 23:35:04.35ID:???
くだらないことやってんなw
俺が終わらせてやるよ。

>>651
JavaやC#のクラスベースと呼ばれるオブジェクト指向の
thisはクラスのインスタンス自身と明確に決まってる。

だけどJavaScriptの場合そうとは限らない。
thisは呼び出し方で決まる。

obj.foo() と呼び出せば、fooの中でthisはobjになるし、
obj.foo.call(data) と呼び出せば、fooの中でthisはdataになる

つまり「この場合」とは "呼び出し側" の "呼び出し方" で決まる。
"呼び出され側" ではないことに注意な。

単純なライブラリであれば通常は、"呼び出し側" は俺らで書くことが多いが
ライブラリのプラグイン用のような仕組みや、イベントハンドラでは、
"呼び出し側" はライブラリ側が担当し、俺らは "呼び出され側" を書くことになる。

その場合に、 "呼び出され側" でthisがどうなるかは "呼び出し側" のライブラリの仕様によるというわけだ
今回の「この場合」とはjQueryのプラグインの場合は、 thisが
jQueryオブジェクトになるとjQueryの仕様で決まっている
0663Name_Not_Found
垢版 |
2017/06/12(月) 02:40:23.85ID:???
>>くだらないことやってんなw
俺が終わらせてやるよ。

www
0664Name_Not_Found
垢版 |
2017/06/12(月) 02:53:49.13ID:???
本当に終わったな。
見事に別の話にすり替わっとるw
0667Name_Not_Found
垢版 |
2017/06/12(月) 03:12:20.69ID:???
どこにでも長々説明下手いるだろうに一々きにするなよ
0668Name_Not_Found
垢版 |
2017/06/12(月) 03:18:57.86ID:???
長い説明見ると頭痛くなるんだよ
0669Name_Not_Found
垢版 |
2017/06/12(月) 12:35:25.18ID:???
>>655,657
これが「煽っても無駄」というあれか
曖昧な質問にはヒントとなるキーワードやURLだけを返す
そういう質問者は大抵、「質問した内容以上に基礎知識が身についてない」ので、詳しい説明は時間の無駄と考えるからだ
(与えたヒントからそれなりに質問内容が絞り込んだ質問に発展するなら、その時にまた考えるがね)
だから、質問が具体的かつ分からない箇所が十分に小さな範囲なら、より詳しく回答する

実際のところ、>>656が十分なヒントを与えてくれていると思うけどな
それでも分からないなら、prototypeチェーンでぐぐれ(To: >>651)
0671Name_Not_Found
垢版 |
2017/06/12(月) 15:26:53.57ID:???
console.log($.fn.jquery);
console.log($().jquery);
0673Name_Not_Found
垢版 |
2017/06/12(月) 22:23:30.67ID:???
ここは質問スレ
これだけヒントを出して貰っていればで十分だろ?
というか、ちょっと検索すれば学習できることだが
0675Name_Not_Found
垢版 |
2017/06/13(火) 21:24:44.87ID:???
>>669
回りくどい

$(・・・)の場合→
thisだけでいい場合→

それだけ
0676Name_Not_Found
垢版 |
2017/06/13(火) 21:33:25.78ID:???
>>675
それだけってお前何も書いてないやんw
重要なのは→の右側だろ
0677Name_Not_Found
垢版 |
2017/06/13(火) 23:48:21.39ID:???
普段行いの悪い人には見えないんだよ
0680Name_Not_Found
垢版 |
2017/06/14(水) 22:54:37.41ID:???
答えになってると思うとこが逆にすごいな
0681Name_Not_Found
垢版 |
2017/06/14(水) 23:31:28.41ID:???
レベル低いのがよくわらく
0682Name_Not_Found
垢版 |
2017/06/15(木) 00:53:33.77ID:???
ヒントは出ているが、それを理解する頭がないか、質問を具体化する頭がないか、のどちらか
0684Name_Not_Found
垢版 |
2017/06/15(木) 21:18:28.21ID:???
自分がわかるから相手もわかると思ってるのだろうな
後輩やら持ったことないのだろう
0685Name_Not_Found
垢版 |
2017/06/15(木) 21:49:21.99ID:???
本当に理解しようと思う人には十分答えになっている
しかし、教えてくれくれ厨にはこのヒントはこたえるよな
0687Name_Not_Found
垢版 |
2017/06/15(木) 22:27:49.58ID:???
答えられないのを濁してるのだろ
0688Name_Not_Found
垢版 |
2017/06/15(木) 22:28:33.03ID:???
スマン抜けてた
「わかりやすく」答えられないのを濁してるのだろ
0690Name_Not_Found
垢版 |
2017/06/16(金) 13:52:40.04ID:???
後輩と見知らぬ他人に教えるのでは全く状況が違うが、6>84は後輩に教えた経験があるのかね…
通常、後輩を教育する時には後輩の理解度を図る質問をしてから、基礎から段階を踏んで覚えさせる
だから、>>651のような曖昧な質問はさせないし、そんな質問が来たら説教ものだ
>>653の「難しい」も具体化出来てないから、質問として成り立ってない

基礎から質疑応答を繰り返して覚えさせるのは相当時間がかかるが、後で仕事で返して貰うための投資なのでそれはいい
が、赤の他人にそこまでやる義理は全くない
「で、君はどこまで分かってるんだ?」「prototypeは分かるか?」「関数は分かるか?」「今まで何を学習した?」
そんなやりとりを繰り返して質問者を答えに導くのは、このスレの役目ではないと思うんだがね
0691Name_Not_Found
垢版 |
2017/06/16(金) 14:55:41.83ID:???
Object.getPrototypeOf(this);
これを理解出来ない時点で何を説いても無駄
0692Name_Not_Found
垢版 |
2017/06/16(金) 21:05:23.10ID:???
>>690
> だから、>>651のような曖昧な質問はさせないし、そんな質問が来たら説教ものだ

じゃあためにし、説教してみてよ?
自分で説教ものだっていったんだから
当然できるよね?

お前のレスみてると、なんかお前の説教のレベルが低い気がするんでねw
0694Name_Not_Found
垢版 |
2017/06/16(金) 23:24:27.86ID:???
>>690
誰からも相手にされない基地外みたいな輩だな
0695Name_Not_Found
垢版 |
2017/06/17(土) 13:41:22.35ID:???
>>692
「赤の他人にそこまでする時間はない」とはっきりいわなければ伝わらないのか
なぜ2chで家庭教師なみに一人の人に教えこまねばならんのだ
俺はそんな時間はないが、文句があるなら暇なあなたが説明すればいいんじゃないかね
それとも、あなたは質問者本人なのか?
0696Name_Not_Found
垢版 |
2017/06/17(土) 13:51:16.62ID:???
>>695
伝わらないに決まってるだろ。
最初からそう言えや。

Q 「○○をするにはどうしたら良いですか?」
A 「赤の他人にそこまでする時間はない」

って答えてればいいだろ
0697Name_Not_Found
垢版 |
2017/06/17(土) 18:56:43.75ID:???
>>696
> 伝わらないに決まってるだろ。
「赤の他人にそこまでやる義理は全くない」をあなたが読み飛ばしただけ

> Q 「○○をするにはどうしたら良いですか?」
> A 「赤の他人にそこまでする時間はない」
この書き方だと質問全般に回答しないように読めるが、質問者の理解度が分かる質問をすれば、答える
問題点を明確化しても内容を全く読まずに「回答しない」という都合が悪い事実だけを取り上げてあなたは煽ってるだけ
日本語の読解力を身に付ける事をお勧めする
0698Name_Not_Found
垢版 |
2017/06/17(土) 19:00:16.34ID:???
>>696
あと、繰り返すようだが、他人を煽り散らす暇があるなら、あなた自身が回答しろ
俺は回答しない理由を釈明したが、あなたは回答するべきだという
あなたがそういうなら、他人任せにせず、あなた自身が解決に向かうように自分から働きかけるべきだ
0699Name_Not_Found
垢版 |
2017/06/17(土) 19:53:54.93ID:???
質問をするのは勝手だけど思い通りの解答を期待するのは間違い
ヒントでもレスくれるだけ有り難いと思いなさい
0700Name_Not_Found
垢版 |
2017/06/17(土) 23:32:59.27ID:???
>>658
質問者です。ありがとうございます、そして遅くなりすみません
「 "呼び出し側" のライブラリの仕様によるというわけだ」まではわかります
インスタンスもなんとなくですが
ただ$(・・・)有無、区別が曖昧というか理解度が浅いようです

で、>>692は質問者ではないです
0701Name_Not_Found
垢版 |
2017/06/17(土) 23:35:00.50ID:???
>>700
jQueryの話だろ?
イベントハンドラ内のthisはDOM要素
ぐらいしか意識することはないぞ。

jQueryプラグインなんて普通書かないだろ?
jQueryプラグインの場合はthisがjQueryオブジェクトってだけだ。
0702Name_Not_Found
垢版 |
2017/06/18(日) 00:10:02.56ID:???
>>701
>jQueryの話だろ?
そうです
ネイティブjsも書きますがjQでの質問です

>jQueryプラグインなんて普通書かないだろ?
書きません
0705Name_Not_Found
垢版 |
2017/06/18(日) 09:36:23.54ID:???
こういう最低なのがいると過疎化するぞ>>704
0707Name_Not_Found
垢版 |
2017/06/19(月) 16:44:25.11ID:???
セレクタが従兄弟関係にあれば処理って無理?
特定のクラスがあって、親に遡り、その兄弟の子供に
処理を加えたい
つまりイトコ。ググっても出てこないんだよな…
0708Name_Not_Found
垢版 |
2017/06/19(月) 17:32:33.62ID:???
>>707
兄弟 = $(特定のクラス).closest(親);
兄弟.children();
0709707
垢版 |
2017/06/19(月) 18:01:03.60ID:???
>>708
ありがとうやってみます
0710707
垢版 |
2017/06/19(月) 18:17:31.67ID:???
>>708さん
納得行く結果に辿りつきましたありがとう( TДT)
2ちゃん住人最強( TДT)
0712Name_Not_Found
垢版 |
2017/06/22(木) 22:09:30.37ID:???
しらじらしいし自演ぽいし
■ このスレッドは過去ログ倉庫に格納されています

ニューススポーツなんでも実況