CODEWITHSUNDEEP
javascriptjqueryattributes
aircraft
aircraft

Reputation: 26886

jQuery attribute selectors - why the quote marks?

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)

Upvotes: 0

Views: 1781

Answers (4)

Bob Stein
Bob Stein

Reputation: 17204

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.

Upvotes: 1

Tomy
Tomy

Reputation: 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

Upvotes: -1

Deepak Kamat
Deepak Kamat

Reputation: 1980

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!

Upvotes: 0

brk
brk

Reputation: 50291

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

Upvotes: 1

Related Questions