在 javascript <script> 标签中查找 jquery 对象

Find a jquery object inside a javascript <script> tag

本文关键字：查找 jquery 对象 标签 script javascript      更新时间：2023-09-26

我在HTML页面中有一个脚本，如下所示：

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

我能够使用 $("#scriptid") 获取HTMLScriptElement，但我无法获取 id "insidedivid" 的底层div 对象。有什么方法可以做到？

这是不可能的;浏览器不会将<script>标签内的 HTML 内容视为 DOM 的一部分。当您使用 $('#idhere').html() 检索 <script> 标记的内容时，您将获得字符串结果。

为了回答 Troy 的问题，他很可能在文档<head>中包含模板，以便最终可以在浏览器端动态呈现内容。但是，如果是这种情况，OP 应使用与 text/html 不同的 MIME 类型。您应该使用未知的 MIME 类型，例如 text/templates --使用 text/html 会混淆内容的用途。

我猜您尝试进入<script>标签并获取div的原因是您在单个<script>标签中构建了较小的子模板。这些较小的模板应放置在自己的<script></script>标签中，而不是包含在一个大的<script></script>标签对中。

因此，而不是：

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

这样做：

<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>
我认为在

脚本标签中有一个div是完全有效的（或在最无用），如果div 对您为脚本。例如，John Resig 使用类型为"text/"的脚本标记html"在他的微模板解决方案中：http://ejohn.org/blog/javascript-micro-templating/在这种情况下（并在回复原作者时），您添加了一个 SCRIPT 标签的 ID，并引用它（我不明白为什么不会使用那种Facebook类型而不是HTML - 但你会可能想在几个不同的浏览器中进行测试;)。对于您给出的示例，您可以通过执行以下操作来获取对 DIV 的引用：

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

"诀窍"是获取脚本标签的 HTML 并转换为 DOM元素与 jQuery - 但请记住，因为你正在传递所有HTML 进入 jQUery 函数，然后立即选择 ALL顶级元素。在这种情况下，只有一个 DIV - 所以你只是在选择它。

您的 HTML 无效。HTML 验证器。

如果你想拥有 HTML，你可以得到这样的，使用这样的东西：

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

如果您正在制作模板系统，则可能需要改用 AJAX。

相关文章：