web-dev-qa-db-ja.com

JQuery $（this）セレクター関数と制限

$（this）を理解するのに助けが必要です。括弧内の「this」の焦点を狭めることは可能ですか、それとも「this」は他の属性の使用を排除しますか？

例：このコードがなぜかわかりません：

$(this).children("div")

このように書き直すことはできません：

$(this +" div")

次のようなものに頼る必要はありません：

$('#'+$(this).attr("id")+" div")

また、JQueryのドキュメントで「これ」を指摘してもらえますか？明らかな理由から、「this」を検索語として使用することは困難です。

jqueryselectorthis
9
Brien Malone

this はjQueryの「もの」ではなく、 基本的なJavaScriptのもの です。オブジェクト、特にDOM要素またはjQueryオブジェクト（現在のコンテキストに応じて）であるため、例のように書き直すことはできません。したがって、これを行った場合：

_ $(this + " div")
_

あなたが本当にやっていることは、 .toString() on this 文字列を連結すると、次のようになります。

_ $("[object Object] div")
_

....これは有効なセレクターではありません。

さらに読むことに関しては、 この記事 はthis（コンテキストキーワード）が何を意味するかを学ぶための最良の参考資料/リソースの1つであり続けると思います。

コメントリクエストごとに、さまざまな場所にあるthisの例をいくつか示します。

  • イベントハンドラー、例：$("selector").click(function() { alert(this); });
    • thisは、イベントハンドラーがトリガーされるDOM要素を指します。
  • JQueryプラグイン内の例：$.fn.myPlugin = function() { alert(this); });
    • thisは、プラグインが呼び出された/チェーンされたjQueryオブジェクトです。例：$("selector").myPlugin();、thisは$("selector")jQueryオブジェクトです。
  • ジェネリック関数の内部。例：function myFunc() { alert(this); };
    • thisは、オブジェクトであろうと他の何かであろうと、現在のコンテキストです。いくつかの例を示します。
    • $("selector").click(myFunc); --thisは、上記のようにDOM要素です
    • $("selector").click(function() { myFunc(); }); --thisはグローバルコンテンツ、window
    • myFunc.call(whatThisIs, arg1, arg2); --thisはwhatThisIs
17
Nick Craver

.find() を使用します

_$( this ).find( 'div' )
_

または、contextパラメータを使用して jQuery( selector, context ) （内部的には、とにかくfindを呼び出すだけです...）

_$( 'div', this )
_
6
gnarf

まず、thisとは何かを理解する必要があります。これは、コンテキストによって異なります。 $関数を呼び出すと、jQueryオブジェクトが返されます。

$(this).children("div")

これは、特定のオブジェクトから、すべての子を取得することを意味します。以下のリンクを参照してください： http://jsfiddle.net/vietean/f2Yrg/

0
vietean

thisは、cssセレクターを表す文字列ではありません（div、#my_idまたは.my_classなど）。
jQuery関数の引数としてthisを渡すと、現在の要素（これが参照するもの）に基づいてjQueryオブジェクトが返されるため、$(this + selector)のようなものは使用できません。 。

0
gion_13

あなたはこれを見ることができます： http://api.jquery.com/each/

基本的に、thisは、コールバックが参照しているDOM要素です。要素に文字列を追加しているため、$(this + " div")を実行することはできません。最初に、3番目のコードスニペットのようにIDを取得する必要があります。

ちなみに、$(this).children("div")は$('#'+$(this).attr("id")+" div")と同じではありません

まず、thisにIDがない可能性があります。その場合、2番目の方法はまったく機能しません。また、IDがある場合でも、その2番目のコードは実際には$(this).find("div")です。あなたが子供が欲しいならあなただけがしなければなりません：

$('#'+$(this).attr("id") + " > div")
0
tster