如何使用 jQuery 从 <template> 选择元素

Question

我有两个类似的选择。第一个使用

<div>

标签，工作正常，第二个使用新的

<template>

标签，它不再工作。

谁能告诉我如何使用 <template> 标签让它与 jQuery

 一起工作？

HTML

<div id="div">
    <div>content</div>
</div>

<template id="template">
    <div>content</div>
</template>

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)

---

http://jsfiddle.net/s8b5w0Le/1/

Answer 1

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

document.createElement('template').content

Answer 2

我相当确定这与 Chrome 使用 Shadow dom 有关（感谢 Polymer...）

您可以使用

/deep/

 组合器试试运气（可能不适用于其他浏览器），但我认为最强大的解决方案是 

$template[0].outerHTML

，如您的评论中所示，如果您只需要文本。

如果您需要 jQuery 功能，使用

$.parseXML

（以避免 Chrome 的本机 dom 构建）可能会在所有浏览器上实现这一点（可以确认 Chrome + FF）。

示例如下：

http://jsfiddle.net/3fe9jjfj

var tc = $('#template')[0].outerHTML;

$template = $($.parseXML(tc)).contents();

console.log($template);
console.log($template.find('div'));

两个日志都按我们的预期返回，并且

$template

 现在可以被视为普通的 jQuery 对象。

Answer 3

正如其他人所指出的，Chrome 将

<template>

 子元素放入影子 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');

Answer 4

一种方式，对于聚会来说太晚了，但我最终这样做了：

function resolveTemplate(id) {
  return $(id).contents();
}

...

var $searchIcon = resolveTemplate('#search-icon-template');
$('#div').append($searchIcon);

Answer 5

如果模板元素内的元素用容器包装，则可以照常使用所有 JQuery 方法。

const temp = $("#template").contents().clone();
$(temp).find("h1").text("A dynamic title");
temp.appendTo($("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app"></div>

<template id="template">
    <div class="container">
        <h1>lorem ipsum</h1>
        <p>lorem ipsum </p>
        <img src="" alt="">
    </div>
</template>

容器还可以使用 JQuery 动态附加。或者，如果您不需要容器，您可以附加其内容。

const temp = $('<div></div>').html($("#template").contents().clone());
$(temp).find("h1").text('dynamic title');
$(temp).find("p").text('But no container this time');
temp.contents().appendTo($("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app"></div>

<template id="template">
    <h1>lorem ipsum</h1>
    <p>lorem ipsum </p>
    <img src="" alt="">
</template>

Answer 6

<template>
   <div class="template-container">
      <div class="content">content</div>
   </div>
</template>

var templateHtml = ('#template').html() // this will return the template container div
var template = $(templateHtml);
var content = template.find('.content');

console.log(content);

Answer 7

var $content = $template.content.find('div');

...而不是...

var $content = $template.find('div');

为我工作。

Answer 8

HTML5模板默认是

display: none;

，模板中的

childNodes

无效，如果你在控制台检查它你会发现不同的东西