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

Habe ich zwei ähnliche Auswahl. Die erste verwendet einen <div> tag, das funktioniert gut, die zweite verwendet ein neu <template> tag, das funktioniert nicht mehr.

Kann mir jemand sagen, wie man diese Arbeit mit jQuery mit der <template> tag?

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/

  • Ich bin mit Chrome 39.0.2171.71 m (falls es wichtig ist)
  • $template[0].outerHTML funktioniert, also sollte es theoretisch möglich sein, mit jQuery arbeiten mit dem <template> tag
  • So kann man nicht die jQuery-allein für diese Arbeit, aber Sie können überprüfen, ob die content - Attribut existiert? Wenn dem so ist, verwenden Sie es - wenn nicht, ist die regelmäßige jQuery Weise funktionieren sollte?
  • versuchen Sie hier stackoverflow.com/questions/15930706/...
InformationsquelleAutor Simon Ferndriger | 2014-12-05
  1. 20

    HTMLTemplateElement speichert den DOM in ein separates 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
    InformationsquelleAutor Martin Wantke
  2. 6

    Ich bin mir ziemlich sicher, dass dies hat zu tun mit Chrome die Verwendung von shadow-dom (danke, Polymer... )

    Können Sie entweder versuchen Sie Ihr Glück mit der /deep/ combinator (wahrscheinlich nicht funktionieren auf anderen Browsern), aber ich denke die stabilste Lösung wäre $template[0].outerHTML wie in Ihrem Kommentar, wenn Sie müssen nur den text.

    Wenn Sie brauchen, jQuery-Funktionen, mit $.parseXML (um zu vermeiden, Chrome native dom-Bau) würde wahrscheinlich do the trick über alle Browser (kann bestätigen, Chrome + FF).

    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 zurück, wie wir erwarten würden, und $template können jetzt behandelt werden, als eine gewöhnliche jQuery-Objekt.

    • Super, danke! Manchmal kommen die besten Antworten von Benutzern, die mit der niedrigsten Menge an reputation gewonnen 😉
    • Es ist ein problem, aber, wenn Sie nicht von XML-kompatible tags (d.h. <hr>), würden Sie brauchen, zu schreiben <hr/>, aber outerHTML noch zurück <hr> - so dass dies schwierig sein könnte
    • Je nachdem, was Ihre Nutzung der Vorlage mit sich bringt, können Sie abwechselnd Weg mit Hilfe eine benutzerdefinierte tag-Namen (z.B. xtemplate), anstatt template. Wenn Sie mit Ihrer Vorlage zum binden von Daten mit LENKER oder so etwas, dann sollte das funktionieren. Wieder, hacky, aber ich denke, das ist, was erwartet wird mit der frühen Verabschiedung
    InformationsquelleAutor Aaron Hammond
  3. 2

    Als andere haben darauf hingewiesen, Chrome legt <template> Kind-Elemente in einem shadow DOM. Der Zugang zu Ihnen ist:

    //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');
    InformationsquelleAutor Jake Wilson
  4. -1

    HTML5-Vorlage ist display: none; standardmäßig childNodes in der Vorlage ist ungültig, wenn Sie überprüfen in der Konsole finden Sie etwas anderes

    InformationsquelleAutor webon
  5. -2

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

    ... statt ...

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

    Arbeitete für mich.

    • Hängt vom browser (firefox braucht .Inhalt, chrome nicht) hm...
    • OK, und was ist mit Internet Explorer?
    • Du meinst wohl $template[0].content (aus der HTMLObject, nicht aus dem jQuery-Objekt) - aber das funktioniert nicht im Internet Explorer, soweit ich weiß: developer.mozilla.org/en-US/docs/Web/HTML/Element/template
    • Ich habe die Konsole.log($template) zu sehen, die Struktur der template-Tag. In Chrome und Firefox scheint es anders zu sein.
    InformationsquelleAutor what
Schreibe einen Kommentar