119

I wrote a code that basically selects all input type=text element like this:

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

How do I change it to select input[type=text] or select?

Jack
  • 7,433
  • 22
  • 63
  • 107

4 Answers4

211

Using a normal css selector:

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

If you don't like the repetition:

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

Or more concisely, pass in the context argument:

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

Note: Internally jQuery will convert the above to find() equivalent

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

Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').

I personally find the first alternative to be the most readable :), your take though

Andreas Wong
  • 59,630
  • 19
  • 106
  • 123
  • 1
    Since the `context form` is using the `find form`, the `find form` is more efficient than the `context form` (one call function avoided). This is valid for almost all selector used. Then, IMO the `find form` is more efficient than the `normal CSS selector`, because both parts of the selector are relative to the root node, where in the `find form`, only the `.sys` part is relative to it, then `input[type=text],select` is executed on a much smaller set of elements so it may be faster (but need this need to be verified by tests) – pomeh May 20 '12 at 16:55
  • 1
    @pomeh I can see where you are coming from, but if performance of a `$` call is that *important* to your app, please avoid using jQuery altogether :). This answer tried to answer OP's question, if it had been a question of performance, this answer won't be here in the first place. Thanks anyhow for the comment :), appreciate it – Andreas Wong May 20 '12 at 17:01
  • 1
    my comment was not about the perf a one `$` call, but about all `$` calls present in one appl. IMO, when you have different ways of doing the same thing, I try to always choose the one which performs better bc. `slow performance` === `unhappy users`. Also, we can **both** answer an OP's question with multiple answers (as you did) and provided advantages/inconvenient of each of them (as I did in comment). IMO it is important to notice why all answers are different, while providing the same result. Also, we can write vanilla JavaScript code that performs slowly: `JavaScript` !== `performance` – pomeh May 20 '12 at 17:16
  • 1
    @pomeh My point about performance was, if you *really* care about performance, don't use jQuery's `$`, classify your divs specifically and use `document.getElemenById/ElementsByClassName`, rather than going through `$` which does a lot of checking / string parsing of your selector, jQuery isn't famous for its performant library. And I haven't honestly seen an app slowing down because of calling `$` one too many, if you have a website that has that problem, please show me, I'm very interested :) – Andreas Wong May 21 '12 at 00:09
  • 1
    ah ok I see your point, and you're absolutely right :) I didn't understand it this way on your first comment. Well, actually, IMO the number of `$` call should be reduced to a minimum (like avoiding multiple `$(this)` in `each` or event handlers), but even if you use `document.getElementsByClassName` you can have some performance issues. A simple example I've faced once: adding 2 events handler on a collection of 1000+ elements (now I know: it was stupid), IE was... unhappy ! The solution I've found was not about native `JavaScript` methods but about event delegation :) – pomeh May 21 '12 at 20:57
  • 1
    anyway, I'm glad you've answered to me and I think you're right when you say "don't use jQuery where it's not needed and if you care about performance". What I wanted to pointed out is: it's not because one is using native `JavaScript` that its script will performs better than another one using `jQuery`, and both native `JavaScript` and `jQuery` have their patterns and anti-patterns concerning performance :) – pomeh May 21 '12 at 21:03
  • 2
    @pomeh Yes, I whole-heartedly agree with your point of JS != Performance :), at the end of the day, it still boils down to us, the programmers to actually write sensible code. Thanks for the short discussion, have a good day :) – Andreas Wong May 22 '12 at 02:41
  • 1
    A bit late to join in, but I think choosing the code that gives the best performance is almost always the right way to go. Reasons? **Code reuse.** You never know where else you'd be able to use that same code. So if you chose the best performance choice already, you needn't worry about it when using it even in a javascript heavy website or application. Maintaining a fine balance between readability and performance is important, though I mostly tend to be a little biased towards performance. To chose one from above, I'd definitely go with `$().find()` – BlackPanther Jul 28 '16 at 09:03
7
$('.sys').children('input[type=text], select').each(function () { ... });

EDIT: Actually this code above is equivalent to the children selector .sys > input[type=text] if you want the descendant select (.sys input[type=text]) you need to use the options given by @NiftyDude.

More information:

Wouter J
  • 41,455
  • 15
  • 107
  • 112
6

If you have multiple inputs as text in a form or a table that you need to iterate through, I did this:

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

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

What I did was I checked each input to see if the type is set to "text", then it'll grab that element and store it in the jQuery list. Then, it would iterate through that list. You can set a temp variable for the current iteration like this:

var $currentItem = $(this);

This will set the current item to the current iteration of your for each loop. Then you can do whatever you want with the temp variable.

Hope this helps anyone!

Jason Cidras
  • 509
  • 5
  • 11
3
$('input[type=text],select', '.sys');

for looping:

$('input[type=text],select', '.sys').each(function() {
   // code
});
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164