jQuery在多个级别下查找子元素

Question

I have:

<div id="d1">
<label>title</label>
 <div class="col">
  <select id="location.state.id">...</select>
 </div>
</div>

Basically, i want to disable/enable the <select> . And I have something like:

$("#d1").find("#location.state.id").prop("disabled", true);

It doesn't work. What am I missing?

Answer 1

The problem is that your id attribute has a value with . inside it.

Since . a CSS selector for class names, jQuery will look for an item that has an ID location and the CSS classes state and id , instead of an element with the ID location.state.id .

You must use the \\\\ before the . to use them in a query selector (in CSS, only \\ would be good):

$('#d1').find('location\\.state\\.id').prop('disabled', true);

---

Quoting jQuery API

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

Answer 2

JQuery API

If you want to escape special characters use \\. In your case:

$("#d1").find("#location\\.state\\.id").prop("disabled", true);