Encuentre un elemento en un objeto jQuery creado a partir de una cadena de HTML

Me gustaría poder construir un objeto jQuery a partir de una cadena de HTML y buscar dentro directamente.

Ejemplo:

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

Yo esperaría eso find en realidad encuentra el div elemento.

Si desea saber más sobre el contexto de mi pregunta, desarrollo una aplicación Backbone y para mostrar ciertas vistas, tengo cosas como esa:

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

Estoy buscando una forma más elegante de lograr el mismo resultado.

¡Gracias!

Gracias Matt, es muy claro. Me siento estúpido por no haber pensado en esta sutileza sobre descendencia y hermanos.

Así que refactoricé mi código:

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

Ahora solo hay una inserción DOM y el código me parece más claro.

preguntado el 03 de mayo de 12 a las 11:05

1 Respuestas

Esto es porque find() busca los descendientes de los elementos en el objeto jQuery, pero el .groups elementos is un elemento en el objeto jQuery, por lo que no coincidirá.

En su lugar, necesita usar filter() para buscar los elementos actuales.

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

Sin embargo, si luego tuvieras la htmlString of <h3><span class="bar">Foo</span></h3><div class="groups"></div>, no encontrarías .bar; esto sería un find() llamada.

Por lo tanto, deberá verificar ambos;

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

contestado el 03 de mayo de 12 a las 11:05

Gracias Matt, es muy claro. Me siento estúpido por no haber pensado en esta sutileza sobre descendencia y hermanos. Así es como refactoricé el código: gist.github.com/2585965. - Tribus Romain

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.