2010-09-01 18 views
13

Estoy tratando de hacer un navegador de imágenes simple para TinyMCE que estoy usando en mi CMS. Como parte de esto, necesito detectar si el usuario ha seleccionado una imagen existente, por lo que puedo mostrar el formulario "editar" en lugar de "elegir un formulario de imagen".¿Cómo seleccionar elementos dentro de una variable usando jQuery?

var selected_html = ed.selection.getContent(); 
var $elem = $(selected_html); 
console.log($elem); 

La primera función devuelve el texto seleccionado por el usuario de la ventana del editor como una cadena de HTML. Luego me gustaría usar jQuery (aunque el Javascript simple también está bien) para verificar si esta cadena contiene una etiqueta img antes de agarrar posteriormente los atributos src y title para su edición.

Ahora he llegado al punto de convertir el html en un objeto. Pero después de esto no puedo buscar el elemento img. Después de leer esto (How to manipulate HTML within a jQuery variable?) Traté:

$elem.find('img'); 

Pero sólo sale como un objeto "indefinido" ...

creo que me falta algo bastante obvio aquí (se hace tarde) , pero después de una hora todavía no puedo entender cómo agarrar la etiqueta img de la selección. .. :(

Muchas gracias de antemano

+1

¿Qué haces para obtener el resultado 'indefinido' que estás obteniendo? ¿Y puede publicar un ejemplo del HTML que se está utilizando para crear el objeto jQuery? – user113716

+0

Solo estoy haciendo console.log (el depurador de Chrome) en este momento. Cualquier cosa que hago, termino con un objeto (un __proto__?) Que tiene un parámetro de contexto establecido en "undefined" y un selector de "img". El HTML que se selecciona es sencillo: solo una img ta, texto en negrita y una etiqueta img, etc. Si registro $ elem (como en el primer bit de código) obtengo un objeto que contiene todos los nodos HTML dentro del bit de código seleccionado. Entonces ese bit funciona bien. Pero luego no puedo lograr que jQuery seleccione solo el elemento img a partir de esto (a través de console.log ($ elem.find ('img'));). Siempre le da a este objeto "indefinido". – Fourjays

+0

El método '.find()' no obtendrá el '' por usted. Ver mi respuesta a continuación. – user113716

Respuesta

25

Como el <img> está en la raíz del objeto jQuery, necesita usar .filter() en lugar de .find().

$elem.filter('img'); 

El método .filter() mira al elemento (s) en el nivel superior del objeto jQuery, mientras .find() mira para elementos anidadas en cualquiera de los elementos de nivel superior.

Si no está seguro de antemano de dónde será el elemento de destino, puede colocar el HTML en un contenedor <div> para buscar. De esa forma, el HTML dado nunca estará en la parte superior.

var selected_html = ed.selection.getContent(); 
var $elem = $('<div>').html(selected_html); 

var $img = $elem.find('img'); 
+0

Perfecto, gracias! Sabía que iba a ser algo bastante simple al final. :PAG – Fourjays

0

tratar de ver lo que es realmente el interior de la variable de $elem Sólo hacer una console.log($elem) utilizando tanto Firefox yFirebug y usted debería ser capaz de manejar bastante bien;)

Cuestiones relacionadas