How to Get Jquery to Select Elements with a . (Period) in Their Id

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

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.

Select elements with periods in ID using jQuery?

You can escape it to select it in jQuery.

Example:

$('#sec\\.ond').doSomething()

Fiddle: http://jsfiddle.net/maniator/C7qhF/

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

How to select html nodes by ID with jquery when the id contains a dot?

@Tomalak in comments:

since ID selectors must be preceded by a hash #, there should be no ambiguity here

“#id.class” is a valid selector that requires both an id and a separate class to match; it's valid and not always totally redundant.

The correct way to select a literal ‘.’ in CSS is to escape it: “#id\.moreid”. This used to cause trouble in some older browsers (in particular IE5.x), but all modern desktop browsers support it.

The same method does seem to work in jQuery 1.3.2, though I haven't tested it thoroughly; quickExpr doesn't pick it up, but the more involved selector parser seems to get it right:

$('#SearchBag\\.CompanyName');

Select elements with a period

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

or use attribute-value selector like this:

$('[id="' + $(this).val()+'"]').show();

Working Demo

Find all select boxes with id or name starting with a specific string

You are trying to get select tag within select tag, remove the find part since its already contains collection of select tags(assuming elements with id prefix product_id are select tags). If there are other elements with id prefix product_id then combine select with the attribute starts with selector.

var IDs = [];
$("#dynamic_field select[id^='product_id']").each(function(){ IDs.push(this.id); });
alert(IDs.length);

You can use jQuery map() method to generate the array where use get() method to convert jQuery collection to array.

var IDs = $("#dynamic_field select[id^='product_id']").map(function(){ return this.id; }).get();

or using jQuery.map method.

var IDs = $.map($("#dynamic_field select[id^='product_id']"), ele => ele.id);

jQuery dot in ID selector?

Use the escaping rules from the jQuery selectors API as follows:

$('#root\\.SomeCoolThing')

From the 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").

Why doesn't this jquery selector with a period work

In the latter selector, . is used to denote a class. So it's looking for the .followed_on class, which it obviously doesn't find and so nothing is matched.

In order to fix this, I think you should escape the dot with a double-backslash:

$("#updates-pane-user\\.followed_on")

According to the jQuery 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 general, try not to use periods or other special characters in your IDs to avoid confusion all around. "Allowed" is not the same as "good practice."

How to select all the Textareas which have their id in a particular pattern

You ca use the selector like

$('textarea[id^="TA"]');

Selects elements that have the specified attribute with a value beginning exactly with a given string.

Edit:
for combining you can use like this, let see the ending patters is *22,*32,**42 so "2" is ur ending pattern.

 $('textarea[id^="TA"]').filter('[id$="2"]');