如何访问html字符串中尚未添加到DOM树的元素？

Question

我正在加载一个HTML模板文件，其中包含我在整个应用程序中使用的模板。 该文件如下所示：

<!DOCTYPE html><html><head><title>static_listview_templates</title></head><body>
<ul id="tmp_listview_basic" class="ui-listview"></ul>
<ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>

<li id="tmp_listview_divider" data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-[theme] ui-corner-top"><span class="ui-divider-text"></span></li>
...
</body></html>

通过requireJS提取模板，这将HTML代码作为文本字符串返回给我。

我已经使用var el = $( string )将字符串转换为jQuery对象，但是我仍然无法访问任何元素（我想是因为它们尚未在DOM中）。

问题：
jQuery / javascript中有没有办法

el.find('#tmp_listview_divider')   // which gives me an empty object []

从我的模板对象中选择一个元素？ 如果是这样，我如何访问并拉出其中一个sub_templates？ 如果没有，我该如何选择“按ID”的strubstring？ 我可以添加一个开始和结束标识符，但我不知道如何以正则表达式"from start-to-end"

谢谢！

编辑：
我的HTML模板：

 <!DOCTYPE html><html><head><title>static_listview_templates</title></head><body><form id="tmp_listview_filter" class="ui-listview-filter ui-bar-[theme] ui-listview-filter-inset" role="search"><div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-[theme]"><input placeholder="" data-type="search" class="ui-input-text ui-body-[theme]"><a title="" class="ui-input-clear ui-btn ui-btn-up-x ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="[theme]" data-mini="false">><span class="ui-btn-text"></span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a></div></form><ul id="tmp_listview_basic" class="ui-listview"></ul><ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul><li id="tmp_listview_divider" data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-[theme] ui-corner-top"><span class="ui-divider-text"></span></li><li id="tmp_listview_item" data-filtertext="[filtertext]" data-theme="c" class="ui-li ui-btn ui-btn-icon-right ui-li-has-arrow ui-first-child ui-last-child ui-btn-up-[theme]"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="[link]" class="ui-link-inherit">[link_content]</a></div><span class="ui-icon ui-icon-[link-icon] ui-icon-shadow">&nbsp;</span></div></li></body></html>

在我的应用程序控制器中，我正在这样做：

... on pagebeforeshow ...
// pull template and language
require(['text!../tx/static_listview.html','i18n!nls/locale_search'], 

   function ( tmp_listview, lib_search ) {
        // element config JSON
        var dyn = $.parseJSON( page.find(':jqmData(template="true")').jqmData("config") );
        console.log( dyn );

        // template                    
        console.log( tmp_listview )
        var tmp = $( tmp_listview ),
            el = tmp.find('#tmp_listview_divider');

        // always []
        console.log( el )
   };

Answer 1

这将达到目的：

var el = $('<div />').html(string).find('#tmp_listview_divider');

要么：

var el = $(string).filter('#tmp_listview_divider');

但是，如果返回的模板包装在一个元素或某种东西中，则前者可能更稳定。

您必须执行其中一项操作，因为.find()获取匹配元素的后代，因此$(string)将以[<title>, <ul>, <ul>, <li>...]返回文档片段[<title>, <ul>, <ul>, <li>...] ，然后.find()将在title，ul，ul，li等后代中搜索#tmp_listview_divider ，这不是您想要的。 您需要将它们全部包装在一个可以在.find()内的元素中。

Answer 2

将HTML字符串放入jQuery对象后，就可以在文档片段上使用el.find()了，但是选择器'#tmp_listview_divider#'看起来不对。 不应包含尾随的# 。

如果您向我们展示了相关的HTML，我们可以帮助您正确选择选择器。

编辑：根据您现在添加到问题中的HTML，您应该可以使用以下代码：

el.find('#tmp_listview_divider')

如何访问html字符串中尚未添加到DOM树的元素？

问题描述

2 个解决方案

解决方案1
1 2012-12-10 00:46:18

解决方案2
0 已采纳 2012-12-09 18:19:40

如何访问html字符串中尚未添加到DOM树的元素？

问题描述

2 个解决方案

解决方案1 1 2012-12-10 00:46:18

解决方案2 0 已采纳 2012-12-09 18:19:40

解决方案1
1 2012-12-10 00:46:18

解决方案2
0 已采纳 2012-12-09 18:19:40