Find an element in a jQuery object built from a string of HTML

Question

I would like to be able to build a jQuery object from a string of HTML and to search inside directly.

Example:

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

I would expect that find actually finds the div element.

If you want to know more about the context of my question, I develop a Backbone app and to render certain Views I have things like that:

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)
  @

I'm looking for a more elegant way to achieve the same result.

Thanks!

Thanks Matt, it is very clear. I feel stupid for not having thought of this subtlety about descendent and siblings.

So I refactored my code:

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)
  @

Now there is only one DOM insertion and the code looks clearer to me.

Matt · Accepted Answer · 2012-05-03 10:42:48Z

8

This is because find() searches the descendants of the elements in the jQuery object, but the .groups element is an element in the jQuery object so won't be matched.

Instead, you need to use filter() to search the current elements.

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

However if you then had the htmlString of <h3><span class="bar">Foo</span></h3><div class="groups"></div>, you wouldn't find .bar; this would be a find() call.

So you'll need to check for both;

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

answered May 3, 2012 at 10:42

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Romain Tribes Over a year ago

Thanks Matt, it is very clear. I feel stupid for not having thought of this subtlety about descendent and siblings. Here is how I refactored the code: gist.github.com/2585965.

Collectives™ on Stack Overflow

Find an element in a jQuery object built from a string of HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related