CODEWITHSUNDEEP
javascriptjquery
dmgig
dmgig

Reputation: 4568

jQuery eq function unexpected behavior

I found a bug in a program I had written, 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 this:

enter image description here

What I'm surprised by is the fact that the eq(0) selects the first input even though I explicitly tell it to find only ones with name=phone[]

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

Is this expected behavior? Does the eq selector ignore attribute selectors?

Upvotes: 5

Views: 130

Answers (5)

dfsq
dfsq

Reputation: 193291

You need to quote name attribute:

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

because phone[] is not valid name without quotes. So jQuery parser (or DOM) simply ignores everything invalid and treats selector as if it was simply input[name='phone']:eq(0). Also worth noting, that looks like this behaviour is fixed in more up to date versions of jQuery. You use pretty old 1.6.4 in your demo, but if you check it with 1.8.x and above it will work properly throwing error.

For example, if you try

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

it will even throw an error

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

But jQuery is more forgiving and it just selects whatever it can.

Upvotes: 5

j08691
j08691

Reputation: 207913

While quoting the name attribute's value isn't strictly required (jQuery for the most part will work fine without them), as you noticed you can run into unusual situations when there are non-alphanumeric characters involved and jQuery interprets them as CSS notation.

The solution is to always properly escape any of these characters (:, ., [, ], etc.) as jQuery recommends, with two backslashes:

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

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

jsFiddle example

Ref: How do I select an element by an ID that has characters used in CSS notation?

Upvotes: 1

davcs86
davcs86

Reputation: 3935

Use

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

JSFiddle

In the selector especification states

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

attribute: An attribute name.

value: An attribute value. Can be either an unquoted single word or a quoted string.

Upvotes: 4

Jivings
Jivings

Reputation: 23250

The square brackets in your selector confuse the attribute selection part as it is not quoted. Notice 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 quotes:

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

Upvotes: 1

aarjithn
aarjithn

Reputation: 1181

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

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

Upvotes: 3

Related Questions