为什么 jQuery.Find() 不返回从 HTML5 模板克隆的文档片段中的 DOM 元素集合？答案

【问题标题】：Why Doesn't jQuery.Find() Return a Collection of DOM Elements from a Document Fragment Cloned From an HTML5 Template?为什么 jQuery.Find() 不返回从 HTML5 模板克隆的文档片段中的 DOM 元素集合？
【发布时间】：2018-01-19 06:30:17
【问题描述】：

为什么$input.size() 两次都将0 输出到给定的控制台：

var $tr = $(CreateLiveNodeFromTemplate("#tplNewMember"));

var $input = $tr.find("td input");

console.log("Number of inputs found using find(): " + $input.size());

$input = $tr.filter("td input");

console.log("Number of inputs found using filter(): " + $input.size());

CreateLiveNodeFromTemplate() 定义为：

function CreateLiveNodeFromTemplate(tplSelector){
   var docFrag = document.querySelector(tplSelector).content; 
   return document.importNode(docFrag, true)
}

HTML5 模板：

<template id="tplNewMember">
    <tr>
        <td><input type="radio" class="chkOwner"></td>
        <td></td>
        <td>Member</td>
        <td><a href="/scripts/Groups.RemoveMember.asp?id=<%= objGroup.id %>&member=#" class="icon icon-delete"></a></td>
    </tr>
</template>

我正在 Firefox 57 中进行测试并使用 jQuery 2.0.3。

【问题讨论】：

标签： jquery html templates find

【解决方案1】：

请尝试$input.length 而不是.size()。

.size() 自 jQuery 1.8 起已弃用。 See documentation for details

【讨论】：