jqueryセレクター入力[type = text] ')


98

私は基本的に次のinput type=textようにすべての要素を選択するコードを書きました:

$('.sys input[type=text]').each(function () {}

選択input[type=text]またはに変更するにはどうすればよいselectですか?

回答:


177

通常のcssセレクターの使用:

$('.sys input[type=text], .sys select').each(function() {...})

繰り返しが気に入らない場合:

$('.sys').find('input[type=text],select').each(function() {...})

より簡潔に言うと、context引数を渡します。

$('input[type=text],select', '.sys').each(function() {...})

注:内部的jQueryに上記をfind()同等のものに変換します

http://api.jquery.com/jQuery/

内部的には、セレクターコンテキストは.find()メソッドで実装されているため、$( 'span'、this)は$(this).find( 'span')と同等です。

私は個人的に最初の選択肢が最も読みやすいと思います:)、あなたの見解


1
以来context form使用されfind formfind formより効率的であるcontext form(回避1つの通話機能)。これは、使用されるほとんどすべてのセレクターに有効です。次に、IMOはよりfind formも効率的normal CSS selectorです。セレクタの両方の部分がルートノードに関連しているためです。ここではfind form.sys部分のみがそれに関連していinput[type=text],selectて、非常に小さい要素のセットで実行されるため、より高速になる場合があります。 (ただし、テストで検証する必要があります)
12

1
@pomehどこから来たのかはわかりますが、$呼び出しのパフォーマンスがアプリにとってそれほど重要な場合は、jQueryの使用を完全に避けてください:)。この答えはOPの質問に答えようとしました。パフォーマンスの問題であった場合、この答えは最初からここにはありません。とにかくコメントをありがとう:)、感謝します
Andreas Wong

1
私のコメントは、パフォーマンスに関する1つの$呼び出しではなく$、1つのアプリケーションに存在するすべての呼び出しに関するものでした。IMO、あなたが同じことをする異なる方法を持っている場合、私は常により良いbcを実行する方法を選択するようにしています。slow performance=== unhappy users。また、OPの質問に複数の回答で回答すること(あなたがしたように)、それぞれに利点/不便を提供することもできます(私がコメントしたように)。IMO同じ結果を提供しながら、すべての回答が異なる理由に気づくことが重要です。また、遅いパフォーマンスのバニラJavaScriptコードを書くこともできます:JavaScript!==performance
pomeh

1
あなたがあれば@pomehパフォーマンスについての私のポイントは、でした、本当に jQueryのを使用していない、パフォーマンスを気にし$、具体的かつ使用あなたのdivを分類するdocument.getElemenById/ElementsByClassNameのではなく、起こって$、あなたのセレクタの解析/文字列をチェックするの多くをしている、jQueryのは有名ではありませんその高性能ライブラリのため。そして、私はアプリの呼び出しが$多すぎるためにアプリが遅くなるのを正直に見たことがありません。その問題のあるWebサイトがある場合は、私に見せてください。非常に興味があります:)
Andreas Wong

2
@pomehはい、私はJSのあなたのポイントに心から同意します!短いディスカッションに感謝します。良い一日をお過ごしください:)
Andreas Wong

7
$('.sys').children('input[type=text], select').each(function () { ... });

編集:実際には上記のコードは.sys > input[type=text]、子孫セレクター(.sys input[type=text])が必要な場合、子セレクターと同等です。@ NiftyDudeで指定されたオプションを使用する必要があります。

詳しくは:


chilren代わりに入力したchildren
ポメ

5

反復する必要があるフォームまたはテーブルのテキストとして複数の入力がある場合、私はこれを行いました:

var $list = $("#tableOrForm :input[type='text']");

$list.each(function(){
    // Go on with your code.
});

私がしたことは、各入力をチェックしてタイプが「テキスト」に設定されているかどうかを確認し、その要素を取得してjQueryリストに格納することでした。次に、そのリストを反復処理します。次のように、現在の反復の一時変数を設定できます。

var $currentItem = $(this);

これにより、現在のアイテムがfor eachループの現在の反復に設定されます。その後、temp変数を使用して、好きなことができます。

これが誰にも役立つことを願っています!


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