web-dev-qa-db-de.com

So wählen Sie Elemente aus <Vorlage> mit jQuery aus

Ich habe zwei ähnliche Auswahlmöglichkeiten. Der erste verwendet einen <div>-Tag, der gut funktioniert, der zweite einen neuen <template>-Tag, der nicht mehr funktioniert.

Kann mir jemand sagen, wie ich mit jQuery mit dem <template>-Tag zum Laufen bringen kann?

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
20
Simon Ferndriger

HTMLTemplateElement speichert das DOM in einem separaten Attribut:

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

Ich bin ziemlich sicher, dass dies mit Chrome's Verwendung von Shadow Dom zu tun hat (danke Polymer ...)

Sie können entweder Ihr Glück mit dem /deep/-Kombinator versuchen (funktioniert wahrscheinlich nicht mit anderen Browsern), aber ich denke, die robusteste Lösung wäre $template[0].outerHTML wie in Ihrem Kommentar, wenn Sie nur den Text benötigen.

Wenn Sie die jQuery-Funktion benötigen, ist die Verwendung von $.parseXML (zur Vermeidung der nativen Dom-Konstruktion von Chrome) wahrscheinlich für alle Browser der Trick (kann Chrome + FF bestätigen).

Beispiel hier: http://jsfiddle.net/3fe9jjfj

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

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

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

Beide Protokolle werden wie erwartet zurückgegeben, und $template kann jetzt als normales jQuery-Objekt behandelt werden.

6
Aaron Hammond

Wie andere bereits bemerkt haben, versetzt Chrome <template>-untergeordnete Elemente in ein Schatten-DOM. Um auf sie zuzugreifen:

// 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