jQuery attribute selectors - why the quote marks?

Question

In jQuery, when selecting by attribute value, why do we need to enclose the value in quotes ' '?

  $("#demo-dropdown a").click(function() {
    var href = $(this).attr("href");
    console.log(typeof (href));  // there shows `string`
    $("#tab-list li a[href= '" + href + "']" ).tab("show");  // why the single-quotes?

  });

If I use:

$("#tab-list li a[href=" + href + "]" ).tab("show");

then I will get a Syntax Error:

Uncaught Error: Syntax error, unrecognized expression: #tab-list li a[href= #profile]
    at Function.fa.error (jquery.min.js:2)
    at fa.tokenize (jquery.min.js:2)
    at fa.select (jquery.min.js:2)
    at Function.fa [as find] (jquery.min.js:2)
    at n.fn.init.find (jquery.min.js:2)
    at new n.fn.init (jquery.min.js:2)
    at n (jquery.min.js:2)
    at HTMLAnchorElement.<anonymous> (index.html?_ijt=o70cto8b6ocd3tq2oh8bck1k4e:171)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.r.handle (jquery.min.js:3)

score 1 · Accepted Answer · answered Jan 27 '18 at 03:22

This is how a jquery attribute-equals-selector look like [name=”value”].Note the quotes. In the below expression it is selecting an anchor tag element which have the matched href

$("#tab-list li a[href= '" + href + "']" ).tab("show"); 
                        ^            ^
  //attribute selector starts        //attribute selector ends

Bob Stein · Answer 2 · 2018-01-27T04:27:47.140

You're selecting based on attribute value. Much of the jQuery selector syntax is derived from CSS selector syntax, so some of the rules come from CSS. If the value you're looking for (contained in the variable href) is not a valid CSS identifier, you need to enclose that sought-value in quotes, as you do with the single-quotes in your first code example. You can't leave out the quotes when the value contains spaces. (Your error message implies href starts with a space.) For even more robustness, escape the value too:

Poor: $("#tab-list li a[href=" + href + "]" )

Okay: $("#tab-list li a[href='" + href + "']" )

Better: $("#tab-list li a[href='" + $.escapeSelector(href) + "']" )

Escaping is required if the value you're seeking could have quote marks in it.

score 0 · Answer 3 · answered Jan 27 '18 at 03:36

It is because when you use a string variable in some place it doesn't also render the " or ' around the string.

For example, when you simply do this

var someString = "Hello World";
console.log( someString );

You will see that it doesn't produce the quotes around the string even though the variable contains a string. Why? Because how inconvenient it would be to have to remove the "" every time you want to use a string variable somewhere.

In reality you don't have the quotes around the string variable.

When you fetch the href attribute, say it looks something like href='www.example.com', only the value is fetched, not the quotes around it. This is important as well, you don't want this to happen:

var someString = "Hello World"; 
$("#someElm").text( someString );
// Produces a result
// where the html looks like this 
// `<div id="someElm">"Hello World"</div>`

Hope that helps!

Tomy · Answer 4 · 2018-01-27T04:00:26.667

-1

You shoud write as code below:

$("#tab-list").find('li').find("a[href='" + $href + "']");

The reason you must use "href='" + $href + "'" beacause href is attribute of tag a, $href is variable you want filter

edited Jan 27 '18 at 04:00

answered Jan 27 '18 at 03:13

Tomy

1
3

Welcome to Stack Overflow! I don't think that helps, breaking down the selector into jQuery functions. And I think your filter call is broken because it's missing square brackets in the selector. Before you post an answer it may be a good idea to test it, such as on [jsfiddle.net](https://jsfiddle.net/). – Bob Stein Jan 27 '18 at 03:33
Thanks, I test it run ok – Tomy Jan 27 '18 at 04:01
Great, but renaming `href` to `$href` should make no difference. JavaScript allows either one as a variable name. (Perhaps you're thinking along the lines of Perl or PHP?) – Bob Stein Jan 27 '18 at 04:07
Thanks. I know that, but at here, I want set for user understand $href is variable, difference with attribute href, so need " ' " + $href + " ' " – Tomy Jan 27 '18 at 04:10
Hmm, I don't think it's needed. And it mildly contradicts [the convention](https://stackoverflow.com/a/553734/673991) to use dollar-sign-prefixed variable names for jQuery objects. – Bob Stein Jan 27 '18 at 04:20
Again. Thank so much :) – Tomy Jan 27 '18 at 04:20

jQuery attribute selectors - why the quote marks?

4 Answers4