0

我正在加载一个 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 代码作为文本字符串返回给我。

我已使用将字符串转换为 jQuery 对象，var el = $( string )但我仍然无法访问任何元素（我假设是因为它们尚未在 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 )
   };
4

2 回答 2

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()先将其全部包装在一个元素中。

于 2012-12-10T00:46:18.370 回答
0

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

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

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

el.find('#tmp_listview_divider')
于 2012-12-09T18:19:40.140 回答