Geek Answers Handbook

JQuery eq function unexpected behavior

I found an error in the program I wrote, but the behavior of the error is inexplicable to me:

If I have:

<input type="text" name="cust_id" value="666" /> <input type="text" name="phone[]" value="666" />

And then use this selector:

 var test = $("input[name=phone[]]:eq(0)"); test.css("color", "red");

I see it:

enter image description here

It amazes me that eq(0) selects the first input, although I explicitly tell it to find only those with name=phone[]

Here is the fiddle: https://jsfiddle.net/1xdnv1t8/

Is this the expected behavior? Has the eq selector selected attribute selectors?

+4
source share
5 answers

Using

 var test = $("input[name='phone[]']:eq(0)");

Jsfiddle

The value of the selector says

jQuery ("[attribute = 'value']")

: attribute name.

value: attribute value. It can be either an unquoted single word or a quoted string.

+4
source

You need to specify the name attribute:

 var test = $("input[name='phone[]']:eq(0)");

because phone[] invalid name without quotes. Therefore, the JQuery (or DOM) parser simply ignores all the invalid ones and processes the selector as if it were just input[name='phone']:eq(0) . It's also worth noting that this behavior seems to be fixed in more modern versions of jQuery. You use the rather old version 1.6.4 in your demo, but if you check it with 1.8.x and higher, it will correctly execute the error.

For example, if you try

 try { document.querySelector("input[name=phone[]]") } catch(e) { alert(e.message) }

he even gives an error

Uncaught SyntaxError: Failed to execute 'querySelector' in 'Document': 'input [name = phone []]' is not a valid selector.

But jQuery is more forgiving, and it just selects everything it can.

+5
source

You are missing quotes around the attribute value. Try it -

var test = $('input[name="phone[]"]:eq(0)');

+3
source

The square brackets in your selector confuse the attribute selection part, as it is not quoted. Please note, if you change the name of the second input to phone , then it works as expected :

 $("input[name=phone]:eq(0)")

Alternatively, wrap the attribute selector in quotation marks:

 $("input[name='phone']:eq(0)")
+1
source

When quoting the value of the name attribute, it is strictly not required (jQuery will work without them for the most part), since you noticed that you may encounter unusual situations when there are non-alphanumeric characters, and jQuery interprets them as a CSS notation.

The solution is to always properly avoid any of these characters ( : , . , [ , ] , Etc.), since jQuery recommends with two backslashes:

To tell jQuery to treat these characters literally than as a CSS notation, they must be "escaped" by placing two backslashes in front of them.

So, according to the jQuery documentation, you should use var test = $("input[name='phone\\[\\]']:eq(0)"); as a selector (although just correctly quoting a string in your case will also work fine).

JsFiddle example

Link: How to select an element by identifier that has characters used in CSS notation?

+1
source

More articles:


All Articles