タグ付けされた質問 「jquery-selectors」

jQueryでセレクターを使用して、ドキュメント内の一連の要素を照合できます。ほとんどのCSSセレクターと、一連のカスタムセレクターが実装されています。

4
すべてのjqueryイベントを$(document)にバインドする必要がありますか?
これはどこから来たのか 私が初めてjQueryを学んだとき、私は通常、次のようなイベントをアタッチしました。 $('.my-widget a').click(function() { $(this).toggleClass('active'); }); セレクターの速度とイベントの委任についてさらに学習した後、「jQueryイベントの委任によってコードが高速化される」といくつかの場所で読みました。だから私はこのようなコードを書き始めました: $('.my-widget').on('click','a',function() { $(this).toggleClass('active'); }); これは、非推奨の.live()イベントの動作を複製するための推奨される方法でもありました。私のサイトの多くは常に動的にウィジェットを追加/削除しているので、これは私にとって重要です。ただし、既存のコンテナ「.my-widget」に追加された要素のみが動作するため、上記は.live()とまったく同じようには動作しません。そのコードが実行された後、htmlの別のブロックを動的に追加した場合、それらの要素はそれらにバインドされたイベントを取得しません。このような: setTimeout(function() { $('body').append('<div class="my-widget"><a>Click does nothing</a></div>'); }, 1000); 私が達成したいこと: .live()の古い動作//イベントをまだ存在しない要素にアタッチすることを意味します .on()の利点 イベントをバインドする最速のパフォーマンス イベントを管理する簡単な方法 私は今このようなすべてのイベントを添付します: $(document).on('click.my-widget-namespace', '.my-widget a', function() { $(this).toggleClass('active'); }); それは私のすべての目標を満たしているようです。(はい、IEでは何らかの理由で遅くなりますが、理由はわかりませんか?)単一のイベントのみが単一の要素に関連付けられ、セカンダリセレクターはイベントが発生したときにのみ評価されるため、高速です(これが間違っている場合は修正してください)。名前空間は、イベントリスナーを簡単に切り替えることができるので素晴らしいです。 私の解決策/質問 そのため、jQueryイベントは常に$(document)にバインドする必要があると考え始めています。 これをしたくない理由はありますか? これはベストプラクティスと見なすことができますか?そうでない場合、なぜですか? これを全部読んだなら、ありがとう。あらゆる/すべてのフィードバック/洞察に感謝します。 仮定: .on()//少なくともバージョン1.7 をサポートするjQueryの使用 イベントを動的に追加されるコンテンツに追加したい 読み/例: http://24ways.org/2011/your-jquery-now-with-less-suck http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery http://www.jasonbuckboyer.com/playground/speed/speed.html http://api.jquery.com/on/

13
jQuery hasClass()-複数のクラスをチェックします
と: if(element.hasClass("class")) 1つのクラスを確認できますが、「要素」に多くのクラスがあるかどうかを確認する簡単な方法はありますか? 使ってます: if(element.hasClass("class") || element.hasClass("class") ... ) 悪くはありませんが、次のようなことを考えています。 if(element.hasClass("class", "class2") 残念ながら動作しません。 そのようなものはありますか?

12
jQuery対document.querySelectorAll
jQueryの最も強力な資産は、DOM内の要素をクエリおよび操作する方法であると何度も聞いたことがあります。CSSクエリを使用して、通常のJavaScriptでは非常に難しい複雑なクエリを作成できます。ただし、私が知る限り、Internet Explorer 8以降でサポートされているdocument.querySelectorまたはでも同じ結果を得ることができますdocument.querySelectorAll。 それで問題はこれです:jQueryの最も強力な資産が純粋なJavaScriptで達成できるのに、なぜjQueryのオーバーヘッドに「リスク」があるのでしょうか? jQueryには、CSSセレクター以上のものがあることを知っています。たとえば、クロスブラウザーAJAX、素敵なイベントアタッチなどです。しかし、そのクエリ部分は、jQueryの強みの非常に大きな部分です。 何かご意見は?

8
コンテンツの完全一致によって要素を選択します
:contains()さて、jQueryのセレクターに、入力された文字列のみを含む要素を選択する方法があるかどうか疑問に思います 例えば ​​- <p>hello</p> <p>hello world</p> $('p:contains("hello")').css('font-weight', 'bold'); セレクターは両方のp要素を選択して太字にしますが、最初の要素のみを選択するようにします。

9
親がホバーされたときに子要素のCSSを変更する
まず、これはCSS3には複雑すぎると思いますが、どこかに解決策がある場合は、代わりにそれを使いたいと思います。 HTMLは非常に単純です。 <div class="parent"> <div class="child"> Text Block 1 </div> </div> <div class="parent"> <div class="child"> Text Block 2 </div> </div> 子divはdisplay:noneに設定されています。デフォルトでは、表示に変更されます:ブロック; マウスが親divの上に置かれたとき。問題は、このマークアップが私のサイトのいくつかの場所に表示され、マウスが親の上にある場合にのみ子を表示し、マウスが他の親の上にある場合は表示しないようにすることです(すべて同じクラスを持っています)名前とIDなし)。 私が使って試してみた$(this)と.children()無駄に。 $('.parent').hover(function(){ $(this).children('.child').css("display","block"); }, function() { $(this).children('.child').css("display","none"); });

6
div要素(jQuery)のすべての子入力を取得する方法
HTML: <div id="panel"> <table> <tr> <td><input id="Search_NazovProjektu" type="text" value="" /></td> </tr> <tr> <td><input id="Search_Popis" type="text" value="" /></td> </tr> </table> </div> 特定のdivのすべての入力を選択する必要があります。 これは機能していません: var i = $("#panel > :input");

3
祖先にjQueryを使用してクラスがあるかどうかを確認する
jQueryに親、祖父母、偉大な祖父母がクラスを持っているかどうかを確認する方法はありますか? 私はコードでこの種のことをやらせているマークアップ構造を持っています: $(elem).parent().parent().parent().parent().hasClass('left') ただし、コードを読みやすくするために、このようなことは避けたいと思います。「親/祖父母/偉大な祖父母がこのクラスを持っている」と言う方法はありますか? jQuery 1.7.2を使用しています。

4
クラスセレクターと属性セレクターをjQueryと組み合わせる
クラスセレクターと属性セレクターの両方をjQuery と組み合わせることが可能ですか? たとえば、次のHTMLがあるとします。 <TABLE> <TR class="myclass" reference="12345"><TD>Row 1</TD></TR> <TR class="otherclass" reference="12345"><TD>Row 2</TD></TR> <TR class="myclass" reference="12345"><TD>Row 3</TD></TR> <TR class="myclass" reference="54321"><TD>Row 4</TD></TR> </TABLE> 行1と3のみを選択するために使用できるセレクターは何ですか? 私が試してみました: $(".myclass [reference=12345]") // returns nothing $(".myclass, [reference=12345]") // returns all 4 rows (yes, I know the comma means 'or') 答えは非常に単純で、jQueryフォーラムとドキュメントを検索してみましたが、これを理解することはできません。誰か助けてもらえますか?



7
jQueryで、ドキュメントではなく親を基準にした位置の値を持つ要素の「top、left」プロパティを設定するにはどうすればよいですか?
.offset([coordinates])メソッドは要素の座標を設定しますが、ドキュメントに対してのみです。次に、要素の座標を親に対して相対的に設定するにはどうすればよいですか? 見つけた .position()メソッドは、親に相対的な「上、左」の値のみを取得する、値は設定されていません。 私が試した $("#mydiv").css({top: 200, left: 200}); しかし動作しません。


6
1つのセレクターに複数のイベントハンドラーを持つjQuery .on()メソッド
複数のイベントが関連付けられている特定のセレクターでJquery .on()メソッドを使用する方法を理解しようとしています。以前は.live()メソッドを使用していましたが、.on()で同じ機能を実現する方法がよくわかりません。以下の私のコードを参照してください: $("table.planning_grid td").live({ mouseenter:function(){ $(this).parent("tr").find("a.delete").show(); }, mouseleave:function(){ $(this).parent("tr").find("a.delete").hide(); }, click:function(){ //do something else. } }); 私は呼び出すことによって複数のイベントを割り当てることができることを知っています: $("table.planning_grid td").on({ mouseenter:function(){ //see above }, mouseleave:function(){ //see above } click:function(){ //etc } }); しかし、私は.on()の適切な使用は次のようになると信じています: $("table.planning_grid").on('mouseenter','td',function(){}); これを達成する方法はありますか?または、ここでのベストプラクティスは何ですか?以下のコードを試しましたが、サイコロはありません。 $("table.planning_grid").on('td',{ mouseenter: function(){ /* event1 */ }, mouseleave: function(){ /* event2 */ }, click: function(){ /* …

2
jQueryは特定のクラス接頭辞を持つ最初の親要素を見つけます
特定のクラスプレフィックスを持つ最初の親を取得したいとします。 <div class="div-a3332"> <div class="div-a89892"> <p> <div class="div-b2"> <div id="divid">hi</div> </div> </p> </div> </div> たとえば、現在の要素は#dividであり、クラスプレフィックスdiv-aを持つ最初の要素を見つけたいと考えています。したがって、基本的には次のように選択されます。 <div class="div-a89892">


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.