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

【问题标题】：how to access an element in an html string that has not been added to the DOM tree yet?如何访问尚未添加到 DOM 树的 html 字符串中的元素？
【发布时间】：2012-12-09 18:17:26
【问题描述】：

我正在加载一个 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”的字符串？我可以添加开始和结束标识符，但我不知道如何正则表达式 "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 )
   };

【问题讨论】：

标签： javascript jquery templates dom jquery-selectors

【解决方案1】：

这样就可以了：

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

或：

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

但如果返回的模板包含在一个元素或其他东西中，前者可能更稳定。

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

【讨论】：

【解决方案2】：

您可以在文档片段上使用el.find()，一旦您将HTML 字符串放入一个jQuery 对象，就像您所做的那样，但是您的选择器'#tmp_listview_divider#' 看起来有问题。不应有尾随 #。

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

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

el.find('#tmp_listview_divider')

【讨论】：

啊。我想按 id 选择。最近有太多 Coldfusion 变量...（需要用## 换行）...已编辑。我将添加完整的代码。 1 秒
按 id 选择，只需一个前导 #。您的实际 ID 中有# 吗？如果是这样，您必须使用 \ 对其进行转义，这意味着您需要在 javascript 字符串声明中使用 \\ 。
模板中的 id 看起来不错。我可以控制我的tmp 对象，它包含( ul#tmp_listview_basic, #ul...) 中的所有元素，但我无法访问它们。
如果 HTML 是 HTML 的合法片段，el.find('#tmp_listview_divider') 的工作原理如下：jsfiddle.net/jfriend00/Btdxb。
哈哈。那么我的也必须工作。感谢您的帮助和小提琴。回到搜索。一旦我有它，我会发布。