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使用影子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

如果模板元素内的元素用容器包装，您可以照常使用所有 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 5

HTML5模板默认为display: none;，模板中的childNodes无效，如果您在控制台中检查它，您会发现不同的内容

Answer 6

var $ content = $ template.content.find（＆＃39; div＆＃39;）;

......而不是......

var $ content = $ template.find（＆＃39; div＆＃39;）;

为我工作。

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

6 个答案: