jQuery无法选择表外的单元格

Question

我知道在<td>之外使用<table>是一个无效的标记，但它仍然是HTML DOM中的一个节点。这就是为什么我能够看到这两个单元格呈现的原因。 jQuery无法将这些细胞传达给我。这是JSBin Demo和代码

HTML

<table>
  <tr><td class='cell1'>Cell inside table</td></tr>
</table>

<tr>
  <td class='cell2'>Cells without table</td>
  <td class='cell2'>Cells without table</td>
</tr> 

JS

var $a = $('#a');

var numCells1 = $('.cell1').length;
var numCells2 = $('.cell2').length;

$a.html('Num Cell1:' + numCells1 + '  Num Cell2:' + numCells2);

输出

Num Cell1:1 Num Cell2:0

为什么Num Cell2为0？我做错了什么？

Answer 1

这就是浏览器在做诀窍，jQuery没有任何问题。如果<tr>不在table范围内，浏览器将不会呈现cell2，并且只会删除所有标记而只留下纯文本。检查浏览器中的元素面板以查看标记..没有类{{1}}

的元素

Answer 2

检查元素，您会看到浏览器丢弃了无效标记，只显示文本。

Answer 3

  

但它仍然是HTML DOM中的节点

这是一个错误的假设，请参阅3.2.1 Semantics：

  

作者不得将元素，属性或属性值用于除其适当的预期语义目的之外的目的，因为这样做会阻止软件正确处理页面。

     

[...]

     

作者不得使用本规范或其他适用规范不允许的元素，属性或属性值，因为这样做会使语言在将来更难扩展。

特别是因为HTML5建议规定了特定的解析器行为，<tr>只能在“in table”状态下正确解析。

另见：

• Unexpected markup in tables（相关，显示表格的其他怪癖）

Answer 4

TR仅在TABLE中有效。浏览器可能完全忽略了HTML的那一部分。

您始终可以使用SCRIPT标记在

中放置您想要的任何内容

<script id="something" type="text/template"><tr><td>whatever</td></tr></script>

并使用jQuery重新创建元素：

var tr = $( $('#something').html() );