jQuery 选择器在 goodreads 网站上的行为不一致
Inconsistent behavior of jQuery selectors on goodreads site
正在尝试从 goodreads site and met inconsistent behavior. For example go to this page: https://www.goodreads.com/quotes?page=56 中提取引号
和 运行 Chrome 控制台中的此选择器：jQuery(".quote") 您将获得引用马克吐温的节点列表：
“Everyone is a moon, and has a dark side which he never shows to anybody.”
― Mark Twain
是第二个，目测可以看出是第二个
但是当你运行：
jQuery(".quotes .quote:nth-of-type(2)") 它 returns 没什么，只有当你 运行 jQuery(".quotes .quote:nth-of-type(3)") 它 returns 马克吐温的名言应该是第二个，而不是第三个。
为什么会这样？
检查该页面上的元素，您会得到：
第二个元素不是.quote，而是：
<div data-react-class="ReactComponents.NativeAd" ... ></div>
所以 .quotes .quote:nth-of-type(2) 不会 select 任何东西，因为 .quote 元素中的 none 是 .quotes 中的第二个 child parent;那就是广告所在。
.quotes .quote:nth-of-type(3) select 是第二个引号，因为广告在第一个和第二个引号之间，所以第二个引号实际上是其 [=43= 的第 3 个 child ].
记住 nth-of-type select 是第 n 个 标签名称 。这里，由于所有children都是<div>，所以.quotes .quote:nth-of-type(3) select是第三个<div>，恰好是.quote。 （它 不是 select class 集合中的 nth 元素）
正在尝试从 goodreads site and met inconsistent behavior. For example go to this page: https://www.goodreads.com/quotes?page=56 中提取引号
和 运行 Chrome 控制台中的此选择器：jQuery(".quote") 您将获得引用马克吐温的节点列表：
“Everyone is a moon, and has a dark side which he never shows to anybody.” ― Mark Twain
是第二个，目测可以看出是第二个
但是当你运行：
jQuery(".quotes .quote:nth-of-type(2)") 它 returns 没什么，只有当你 运行 jQuery(".quotes .quote:nth-of-type(3)") 它 returns 马克吐温的名言应该是第二个，而不是第三个。
为什么会这样？
检查该页面上的元素，您会得到：
第二个元素不是.quote，而是：
<div data-react-class="ReactComponents.NativeAd" ... ></div>
所以 .quotes .quote:nth-of-type(2) 不会 select 任何东西，因为 .quote 元素中的 none 是 .quotes 中的第二个 child parent;那就是广告所在。
.quotes .quote:nth-of-type(3) select 是第二个引号，因为广告在第一个和第二个引号之间，所以第二个引号实际上是其 [=43= 的第 3 个 child ].
记住 nth-of-type select 是第 n 个 标签名称 。这里，由于所有children都是<div>，所以.quotes .quote:nth-of-type(3) select是第三个<div>，恰好是.quote。 （它 不是 select class 集合中的 nth 元素）