Question

我一直在试验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不会表现得很好。

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

Answer 1

实际上，.find 对jQuery对象的两个元素进行操作，但只有find是它们的后代。你想要的是.filter：

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

Answer 2

您可以使用：

$html.filter('ul');

<强>基调：

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

您还可以查看here

没有根级节点的模板

2 个答案: