没有根级节点的模板答案

【问题标题】：Templates with out root level nodes没有根级节点的模板
【发布时间】：2012-05-26 21:57:33
【问题描述】：

我一直在尝试在 js 中进行模板化，遇到了一个很酷的问题。假设您有一个车把模板。然后编译输出

var template =
  '<h1>Hello</h1>' +
  '<ul>' +
    '<li>{{name}}</li>' +
    '<li>{{address}}</li>' +
    '<li>{{phone}}</li>' +
  '</ul>';

var html = Handbars.compile(template)(
  {name: 'Austin', address: '42nd St.' phone: '(123) 456-7890'}
);

// Results in
console.log(html);
=> <h1>Hello</h1>
   <ul>
     <li>Austin</li>
     <li>42nd St.</li>
     <li>(123) 456-7890</li>
   </ul>

现在说你想让它成为一个 jQuery 对象并对其进行操作可能会找到 ul

var $html = $(html)
var x = $html.find('ul');  \\ Or
var y = $('ul', $html)

console.log(x);
=> []

conosle.log(y);
=> 

console.log($html)
=> [<h1>Hello</h1>, <ul>...</ul>]

这表明当你对一个没有根节点的字符串进行 jQueryify 处理时，你会得到一个节点数组

而且这些发现只作用于$html[0]

我能够解决这个问题的唯一方法是在我的模板中包含一个根节点，但我不喜欢仅仅因为 jQuery 的表现不佳而添加无意义的非语义标记。

如何以编程方式解决这个问题，而不是修改标记。

【问题讨论】：

标签： jquery html coding-style templating

【解决方案1】：

事实上，.find确实对 jQuery 对象的两个元素都进行了操作，但它只对 finds 的后代进行了操作。你要的是.filter:

var x = $html.filter('ul');

【讨论】：

【解决方案2】：

您可以使用：

$html.filter('ul');

主题演讲：

过滤器将选择已经存在的某个子集（零个或多个）
选定的元素。
find 将选择一组（零个或多个）作为后代的元素
已经选择的元素。

您也可以查看here

【讨论】：