Question

我希望能够从HTML字符串构建一个jQuery对象并直接在里面搜索。

示例：

htmlString = '<h3>Foo</h3><div class="groups"></div>'
$html      = $(htmlString)
$groups    = $html.find('.groups') // Returns []. WTF?

我希望find实际上找到div元素。

如果你想了解更多关于我的问题的背景，我开发了一个Backbone应用程序并呈现某些视图，我有类似的东西：

render: ->
  $html   = $(@template(vehicle: @vehicle))
  $groups = $()

  _(@groups).each (group)=>
    subview = new App.Views.AttributesGroup(group: group, vehicle: @vehicle)
    $groups = $groups.add(subview.render().el)

  $(@el).html($html)
  $(@el).find('.groups').replaceWith($groups)
  @

我正在寻找一种更优雅的方法来达到同样的效果。

谢谢！

谢谢马特，很清楚。我没有想到关于后代和兄弟姐妹的这种微妙之处，我觉得很愚蠢。

所以我重构了我的代码：

render: ->
  $html   = $(@template(vehicle: @vehicle))
  $groups = $html.filter('.groups')

  _(@groups).each (group)=>
    subview = new App.Views.AttributesGroup(group: group, vehicle: @vehicle)
    $groups.append(subview.render().el)

  $(@el).html($html)
  @

现在只有一个DOM插入，代码看起来更清晰。

Answer 1

这是因为find()搜索jQuery对象中元素的后代，但.groups元素是 jQuery对象中的一个元素，因此不会匹配

相反，您需要使用filter()来搜索当前元素。

htmlString = '<h3>Foo</h3><div class="groups"></div>'
$html      = $(htmlString)
$groups    = $html.filter('.groups');

但是，如果您拥有htmlString的{{1}}，则无法找到<h3><span class="bar">Foo</span></h3><div class="groups"></div>;这将是.bar电话。

所以你需要检查两者;

find()

在由HTML字符串构建的jQuery对象中查找元素

1 个答案: