javascript 如何使用 jQuery 从 <template> 中选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27311226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select elements from <template> with jQuery
提问by Simon Ferndriger
I have two similar selections. The first uses a <div>tag, which works fine, the second uses a newly <template>tag, which doesn't work anymore.
我有两个相似的选择。第一个使用<div>标签，工作正常，第二个使用新<template>标签，不再工作。
Can anyone tell me how to get this to work with jQueryusing the <template>tag?
谁能告诉我如何使用标签让它与 jQuery一起工作<template>？
HTML
HTML
<div id="div">
<div>content</div>
</div>
<template id="template">
<div>content</div>
</template>
JavaScript
JavaScript
var $div = $('#div');
var $content = $div.find('div');
console.log($content); //works ($content.length == 1)
var $template = $('#template');
var $content = $template.find('div');
console.log($content); //doesn't work ($content.length == 0)
采纳答案by Martin Wantke
HTMLTemplateElement saves the DOM into a seperate attribute:
HTMLTemplateElement 将 DOM 保存到一个单独的属性中：
JQuery
查询
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var $div = $('#div');
var $content = $div.find('div');
console.log($content.text()); // output "content", inner div
var $template = $('#template');
var node = $template.prop('content');
var $content = $(node).find('div');
console.log($content.text()); // output "content", inner template
});
JavaScript
JavaScript
document.createElement('template').content
回答by Aaron Hammond
I'm fairly certain this has to do with Chrome's use of shadow dom (thank Polymer... )
我很确定这与 Chrome 对 shadow dom 的使用有关（感谢 Polymer...）
You can either try your luck using the /deep/combinator (probably won't work on other browsers), but I think the most robust solution would be $template[0].outerHTMLas in your comment if you just need the text.
您可以使用/deep/组合器试试运气（可能不适用于其他浏览器），但我认为$template[0].outerHTML如果您只需要文本，最可靠的解决方案将是您的评论。
If you need jQuery functionality, using $.parseXML(to avoid Chrome's native dom construction) would probably do the trick across all browsers (can confirm Chrome + FF).
如果您需要 jQuery 功能，则使用$.parseXML（以避免 Chrome 的本机 dom 构造）可能会在所有浏览器中起作用（可以确认 Chrome + FF）。
Example here: http://jsfiddle.net/3fe9jjfj
这里的例子：http: //jsfiddle.net/3fe9jjfj
var tc = $('#template')[0].outerHTML;
$template = $($.parseXML(tc)).contents();
console.log($template);
console.log($template.find('div'));
Both logs return as we'd expect, and $templatecan now be treated as an ordinary jQuery object.
两个日志都按照我们的预期返回，$template现在可以将其视为普通的 jQuery 对象。
回答by Jake Wilson
As others have noted, Chrome puts <template>child elements into a shadow DOM. To access them:
正如其他人所指出的，Chrome 将<template>子元素放入 shadow DOM。要访问它们：
// Access the JavaScript object for the template content
$('template')[0]
// Make a jQuery selection out of it
$($('template')[0])
// Now you can search it
$($('template')[0]).find('div.someclass').css('color','#000');
回答by webon
HTML5 template is display: none;by default, childNodesin template is invalid, if you inspect it in console you'll find something different
display: none;默认情况下HTML5 模板是childNodes无效的，如果您在控制台中检查它，您会发现不同的东西
回答by what
var $content = $template.content.find('div');
var $content = $template.content.find('div');
... instead of ...
... 代替 ...
var $content = $template.find('div');
var $content = $template.find('div');
Worked for me.
对我来说有效。
