使用nth-of-type选择文本返回拼接字符串的问题排查

错误原因 #

你使用的选择器div.mydata dl:nth-of-type(1)会匹配所有父元素下的第一个dl标签。查看你的HTML结构，.right容器下有4个包含dl的子div，每个div里的dl都是各自父元素的第一个（也是唯一一个）dl，所以这个选择器会同时选中4个dl元素。

而jQuery的.text()方法作用在多个元素上时，会自动把所有元素的文本内容拼接后返回，最终得到1933110 m243（其中<sup>2</sup>的文本会被直接提取为2）。

正确的选择方式 #

要精准获取1933，需要缩小选择范围，以下几种写法都可以：

方法1：定位到.right下的第一个子div #

console.log($('div.mydata .right div:first-child dl').text());

方法2：使用jQuery的:eq()伪类选择第一个dl #

console.log($('div.mydata dl:eq(0)').text());

方法3：用nth-child()定位目标父容器 #

console.log($('div.mydata .right > div:nth-child(1) dl').text());

内容的提问来源于stack exchange，提问作者Adam