为什么 css 选择器 return 与 jQuery 选择器的长度不同

Question

我注意到这两个表达式 return 长度不同（检查控制台）：

var cssSelector =  $('#target').siblings('table > tbody > tr > td').length; // returns 0
var jQuerySelector =  $('#target').siblings('table').children('tbody').children('tr').children('td').length; // returns 1
console.log('cssSelector: ' + cssSelector);
console.log('jQuerySelector: ' + jQuerySelector);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="target">Target</div>
<table>
  <tbody>
    <tr><td>Cell</td></tr>
  </tbody>
</table>

我希望它们 select 相同的元素，所以它们会 return 相同的结果。

Answer 1

.siblings('table > tbody > tr > td') 匹配 td 个元素。您可以分辨出来，因为选择器的主题是 td。由于 #target 的兄弟姐妹是 table，而不是 td，这不会匹配任何内容。

.siblings('table') 匹配 table 个元素。然后，您会进行一系列 .children() 调用，深入到 table 的 td 后代，从而产生成功的匹配。

Answer 2

因为 table 是 #target 的兄弟，而你说 td 是你的 var cssSelector 中的兄弟，这是不正确的，因为 td 是 table 的 child。

var cssSelector =  $('#target').siblings('table').length; // returns 1
var jQuerySelector =  $('#target').siblings('table').children('tbody').children('tr').children('td').length; // returns 1
console.log('cssSelector: ' + cssSelector);
console.log('jQuerySelector: ' + jQuerySelector);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="target">Target</div>
<table>
  <tbody>
    <tr><td>Cell</td></tr>
  </tbody>
</table>

Answer 3

这里 $('#target').siblings('table') 给出 table 是 #target 的兄弟，然后你需要通过 .find("tbody > tr > td")[=15= 解析它的 children ]

var cssSelector =  $('#target').siblings('table').find("tbody > tr > td").length; // returns 0
var jQuerySelector =  $('#target').siblings('table').children('tbody').children('tr').children('td').length; // returns 1
console.log(cssSelector);
console.log(jQuerySelector);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="target">Target</div>
<table>
  <tbody>
    <tr><td>Cell</td></tr>
  </tbody>
</table>

为什么 css 选择器 return 与 jQuery 选择器的长度不同

Why does css selector return different length from jQuery selector

html

jquery

jquery-selectors