web-dev-qa-db-ja.com

jQueryで<template>から要素を選択する方法

私は2つの類似した選択があります。 1つ目は正常に機能する<div>タグを使用し、2つ目は機能しなくなった新しく<template>タグを使用します。

これを機能させる方法を誰かに教えてもらえますかwith 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/

javascriptjqueryhtmltemplates
22
Simon Ferndriger

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
21
Martin Wantke

私はこれがChromeのシャドウドムの使用に関係していると確信しています（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オブジェクトとして扱うことができます。

6
Aaron Hammond

他の人が指摘したように、Chrome puts <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');
2
Jake Wilson