1

我一直在尝试在 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 表现不佳而添加毫无意义的非语义标记。

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

4

2 回答 2

1

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

var x = $html.filter('ul');
于 2012-05-19T18:11:19.260 回答
1

您可以使用：

$html.filter('ul');

基调：


  • filter 将选择已选择元素的某个子集（零个或多个） 。

  • find 将选择一组（零个或多个）元素，这些元素是
    已选择元素的后代。

你也可以在这里查看

于 2012-05-19T18:11:55.750 回答