jQuery selector with dot character

发表于 | | 阅读次数

在最近的一个项目中，使用grunt作为脚本工具，将一组HTML文件合并成一个文件，并使用各个文件的名称作为合并后片段的id值。也就是说，在合并后的文件中，将会存在类似如下的HTML代码：

1
2
3
4
5
<div class="content">
  <div class="section" id="chapter1.html">...</div>
  <div class="section" id="chapter2.html">...</div>
  <div class="section" id="chapter3.html">...</div>
</div>

每个section的id值是以chapterX.html的形式存在。当使用jQuery去选择这些元素的时候，要做一定的处理。默认情况下，选择器#chapter1.html将会匹配class中包含.html，并且id值是chapter1的元素。从HTML角度来看就是：

1
<div class="html" id="chapter">...</div>

那么要匹配id="chapter1.html"指定的元素，就需要对.字符进行转换。这种字符在jQuery中称为元字符，包括有：

1
!"#$%&'()*+,./:;<=>?@[\]^`{|}~

转义是使用两个反斜杠，比如对于.元字符要写成\\.。所以对于例子中的选择器需要改写成：

1
var sections = $('#chapter\\.html');

参考：

0%