Right now I have a very long jQuery selector to target many different input fields.

$('input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea, select', ctx).each(function (){
    // do something
});

As you can see, this string is way too long when editing in the text editor, and can only get longer. I wonder if there's a way to better organize it.

I tried breaking it down into different lines like this,

$('input[type="text"],   
    input[type="number"], 
    input[type="email"], 
    input[type="tel"], 
    textarea, 
    select', ctx).each(function (){
});

but got an error Unexpected token ILLEGAL.

Right now I have a very long jQuery selector to target many different input fields.

$('input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea, select', ctx).each(function (){
    // do something
});

As you can see, this string is way too long when editing in the text editor, and can only get longer. I wonder if there's a way to better organize it.

I tried breaking it down into different lines like this,

$('input[type="text"],   
    input[type="number"], 
    input[type="email"], 
    input[type="tel"], 
    textarea, 
    select', ctx).each(function (){
});

but got an error Unexpected token ILLEGAL.

• javascript
• jquery

Share Improve this question Follow asked Dec 7, 2013 at 16:07 Tri NguyenTri Nguyen 11.2k99 gold badges4848 silver badges7878 bronze badges 4

• Are you including types of inputs? Maybe you just say input and then not those types which you don't want. – Abhitalks Commented Dec 7, 2013 at 16:13
• 2 generally a good idea to add mon class to those elements and then only need that class as selector – charlietfl Commented Dec 7, 2013 at 16:21
• @abhitalks there are many other input cases that I need to handle separately, so blanket all of them will not work for me. – Tri Nguyen Commented Dec 7, 2013 at 16:25
• @TriNguyen if you have that many elements, your approach is very hard to maintain. Narrow the selector down by using class. It is the best practice approach – charlietfl Commented Dec 7, 2013 at 17:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

For the sake of pleteness, consider also:

$([
    'input[type="text"]',
    'input[type="number"]',
    'input[type="email"]',
    'input[type="tel"]',
    'textarea',
    'select'
].join(', '), ctx).each( ... );

Your string literals are not properly terminated in the line break

$('input[type="text"],\
    input[type="number"],\
    input[type="email"],\
    input[type="tel"],\
    textarea,\
    select', ctx).each(function (){
});

There's a jQuery selector for that

$(':input', ctx).each(function () {...

http://api.jquery./input-selector/

I know this is old but I think you can also use backticks (``)

$(`input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select`, ctx).each(function (){
});

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Template_literals