Как выбрать элементы из <template> с помощью jQuery

У меня есть два похожих выбора. Первый использует тег <div>, который отлично работает, второй использует новый тег <template>, который больше не работает.

Может ли кто-нибудь сказать мне, как заставить это работать с помощью jQuery с помощью тега <template>?

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/

Ответ 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

Ответ 2

Я довольно уверен, что это связано с использованием Chrome теневого dom (спасибо Polymer...)

Вы можете либо попробовать удачу, используя комбинатор /deep/ (вероятно, не будет работать в других браузерах), но я думаю, что наиболее надежное решение будет $template[0].outerHTML как в вашем комментарии, если вам просто нужен текст.

Если вам нужна функция jQuery, использование $.parseXML (чтобы избежать встроенной конструкции дома Chrome), вероятно, сделает трюк во всех браузерах (может подтвердить 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.

Ответ 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');

Ответ 4

HTML5 шаблон display: none; по умолчанию, childNodes в шаблоне недействителен, если вы проверите его в консоли, вы найдете что-то другое

Ответ 5

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

... вместо...

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

Работал для меня.