2012-08-16 14 views
6

Mam skrypt na stronie HTML z następujących powodów:Znajdź obiekt jquery wewnątrz javascript <script> tagu

<script id="scriptid" type="text/html"> 
    <div id="insidedivid"> 
     ... html code ... 
    </div> 
</script> 

jestem w stanie uzyskać HTMLScriptElement użyciu $("#scriptid") ale nie jestem w stanie uzyskać div leżących u podstaw obiekt o identyfikatorze "insidedivid". Jak to zrobić?

+4

Twój znacznik jest nieprawidłowy. – undefined

+0

Czy próbujesz coś zrobić z szablonami? http://ejohn.org/blog/javascript-micro-templating/ – dana

+0

@undefined: Podczas korzystania z bibliotek takich jak 'knockoutJs' lub' Handlebars' na przykład w ten sposób musisz zdefiniować szablony. – Nope

Odpowiedz

8

To niemożliwe; przeglądarka nie traktuje treści HTML wewnątrz znaczników <script> jako części DOM. Gdy pobierzesz zawartość tagu <script> za pomocą $('#idhere').html(), otrzymujesz wynik ciągu.

Aby odpowiedzieć na pytanie Troya, najprawdopodobniej zawiera szablony w dokumencie <head>, aby mógł ostatecznie renderować zawartość dynamicznie po stronie przeglądarki. Jeśli jednak tak jest, OP powinien używać innego typu MIME niż text/html. Powinieneś używać nieznanego typu MIME, takiego jak text/templates - przy użyciu text/html mylisz to, co jest celem zawartości.

jestem zgadywania powód, dla którego próbujemy dotrzeć do tagu <script> i złapał div to dlatego, że zbudowana mniejsze podgrupy szablonów w ramach jednolitego <script> tagu. Te mniejsze szablony powinny raczej być umieszczane w ich własnych znacznikach <script></script> niż w jednej dużej parze tagów <script></script>.

Więc zamiast:

<script type="text/template" id="big_template"> 
    <div id="sub_template_1"> 
     <span>hello world 1!</span> 
    </div> 
    <div id="sub_template_2"> 
     <span>hello world 2!</span> 
    </div> 
</script> 

Wykonaj:

<script type="text/template" id="template_1"> 
    <span>hello world 1!</span> 
</script> 

<script type="text/template" id="template_2"> 
    <span>hello world 2!</span> 
</script> 
0

Twój HTML jest nieprawidłowy. HTML Validator.

Jeśli chcesz mieć HTML można uzyskać tak po prostu używać coś takiego:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title></title> 
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
    var msg1 = $('message1'); 
    // Execute code here 
}); 
    </script> 
</head> 
<body> 
    <div id="content">Content</div> 
    <div id="hidden" style="display: none"> 
     <div id="message1">Message 1</div> 
     <div id="message2">Message 2</div> 
    </div> 
</body> 
</html> 

Jeśli dokonujesz system szablonów, można użyć zamiast AJAX.

2

Wydaje mi się, że jest całkowicie poprawne umieszczenie elementu div wewnątrz znacznika skryptu (lub na najmniej użytecznego), jeśli div ma sens dla TYPE zdefiniowanego dla skryptu . Na przykład John Resig używa znacznika skryptu z tekstem "text/ html" w swoim rozwiązaniu mikroskopijnym: http://ejohn.org/blog/javascript-micro-templating/ W tym przypadku (i w odpowiedzi na oryginalnego autora) dodajesz identyfikator do znacznika SCRIPT, i odsyłają do tego (nie rozumiem, dlaczego nie byłby on kompatybilny z tym typem facebooka zamiast z html - ale prawdopodobnie chciałbyś przetestować go w kilku różnych przeglądarkach;). Dla przykładu dałeś, można uzyskać odniesienie do DIV wykonując:

<script id="scriptid" type="text/html"> 
    <div id="insidedivid"> 
     ... html code ... 
    </div> 
</script> 
    $(function(){ 
     alert($($('#scriptid').html()).text()); //alerts " ... html code ..." 
    }); 

W „trick” jest uzyskanie HTML tagu script i skręcić w do DOM elementy z jQuery - ale pamiętaj, , ponieważ przekazujesz cały kod do funkcji jquery, a następnie od razu wybierzesz WSZYSTKIE elementów najwyższego poziomu. W takim przypadku istnieje tylko jeden DIV - tak właśnie to wybierasz.

Powiązane problemy