Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I get jQuery to select elements with a . (period) in their ID?

People also ask

How do you select element by id in jQuery?

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

How do you select an element with ID data '?

Use the querySelector method to get an element by data attribute, e.g. document. querySelector('[data-id="box1"]') . The querySelector method returns the first element that matches the provided selector or null if no element matches the selector in the document.

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

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Can I use dot in ID HTML?

The value must not contain any space characters. HTML 4: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").


From Google Groups:

Use two backslashes before each special character.

A backslash in a jQuery selector escapes the next character. But you need two of them because backslash is also the escape character for JavaScript strings. The first backslash escapes the second one, giving you one actual backslash in your string - which then escapes the next character for jQuery.

So, I guess you're looking at

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address\\.Country").fillSelect(data);
  });
  $("#Address\\.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address\\.State").fillSelect(data);
    });
  });
});

Also check out How do I select an element by an ID that has characters used in CSS notation? on the jQuery FAQ.


You can't use a jQuery id selector if the id contains spaces. Use an attribute selector:

$('[id=foo bar]').show();

If possible, specify element type as well:

$('div[id=foo bar]').show();

Escape it for Jquery:

function escapeSelector(s){
    return s.replace( /(:|\.|\[|\])/g, "\\$1" );
}

usage example:

e.find('option[value='+escapeSelector(val)+']')

more info here.


The Release Candidate of ASP.NET MVC that was just released fixed this issue, it now replaces the dots with underscores for the ID attribute.

<%= Html.TextBox("Person.FirstName") %>

Renders to

<input type="text" name="Person.FirstName" id="Person_FirstName" />

For more information view the release notes, starting on page 14.


This is documented in jQuery Selectors docs:

To use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

In short, prefix the . with \\ as follows:

$("#Address\\.Country")

Why doesn't . work in my ID?

The problem is that . has special significance, the string following is interpreted as a class selector. So $('#Address.Country') would match <div id="Address" class="Country">.

When escaped as \\., the dot will be treated as normal text with no special significance, matching the ID you desire <div id="Address.Country">.

This applies to all the characters !"#$%&'()*+,./:;<=>?@[\]^`{|}~ which would otherwise have special significance as a selector in jQuery. Just prepend \\ to treat them as normal text.

Why 2 \\?

As noted in bdukes answer, there is a reason we need 2 \ characters. \ will escape the following character in JavaScript. Se when JavaScript interprets the string "#Address\.Country", it will see the \, interpret it to mean take the following character litterally and remove it when the string is passed in as the argument to $(). That means jQuery will still see the string as "#Address.Country".

That's where the second \ comes in to play. The first one tells JavaScript to interpret the second as a literal (non-special) character. This means the second will be seen by jQuery and understand that the following . character is a literal character.

Phew! Maybe we can visualize that.

//    Javascript, the following \ is not special.
//         | 
//         |
//         v    
$("#Address\\.Country");
//          ^ 
//          |
//          |
//      jQuery, the following . is not special.

Using two Backslashes it´s ok, it´s work. But if you are using a dynamic name, I mean, a variable name, you will need to replace characters.

If you don´t wan´t to change your variables names you can do this:

var variable="namewith.andother";    
var jqueryObj = $(document.getElementById(variable));

and than you have your jquery object.