2010-09-01 14 views
13

Sto cercando di creare un semplice browser di immagini per TinyMCE che sto utilizzando nel mio CMS. Come parte di questo ho bisogno di rilevare se l'utente ha selezionato un'immagine esistente, quindi posso visualizzare il modulo "modifica" invece del "scegli un modulo immagine".Come selezionare gli elementi all'interno di una variabile usando jQuery?

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

La prima funzione restituisce il testo selezionato dall'utente dalla finestra dell'editor come una stringa di HTML. Vorrei quindi usare jQuery (anche se javascript semplice va bene anch'esso) per verificare se questa stringa contiene un tag img prima di afferrare successivamente gli attributi src e title per la modifica.

Ora ho ottenuto fino a trasformare il codice HTML in un oggetto. Ma dopo questo non riesco a cercarlo per l'elemento img. Dopo aver letto questo (How to manipulate HTML within a jQuery variable?) ho provato:

$elem.find('img'); 

ma appena esce come un oggetto "non definito" ...

penso che mi manca qualcosa di abbastanza ovvio qui (si fa tardi) , ma dopo un'ora non riesco ancora a capire come afferrare il tag img dalla selezione. .. :(

Molte grazie in anticipo

+1

Cosa fai per ottenere il risultato "indefinito" che ottieni? E puoi pubblicare un esempio dell'HTML che viene utilizzato per creare l'oggetto jQuery? – user113716

+0

Sto solo facendo console.log (debugger di Chrome) al momento. Qualunque cosa faccia, finisco con un oggetto (un __proto__?) Che ha un parametro di contesto impostato su "indefinito" e un selettore di "img". L'HTML selezionato è semplice: solo un'immagine, un testo in grassetto e un tag img, ecc. Se registro $ elem (come nel primo bit di codice) ottengo un oggetto che contiene tutti i nodi HTML all'interno del bit di codice selezionato. Quindi quel bit funziona bene. Ma poi non riesco a ottenere jQuery per scegliere solo l'elemento img da questo (tramite console.log ($ elem.find ('img'));). Dà sempre questo oggetto "non definito". – Fourjays

+0

Il metodo '.find()' non otterrà il '' per te. Vedi la mia risposta qui sotto. – user113716

risposta

25

Poiché lo <img> si trova nella radice dell'oggetto jQuery, è necessario utilizzare .filter() anziché .find().

$elem.filter('img'); 

Procedimento .filter() guarda l'elemento (s) al livello superiore dell'oggetto jQuery, mentre .find() guarda per elementi annidati in qualunque degli elementi di livello superiore.

Se non si è sicuri dell'ubicazione dell'elemento di destinazione, è possibile posizionare l'HTML in un wrapper <div> da cui effettuare la ricerca. In questo modo l'HTML fornito non sarà mai al top.

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

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

Perfetto, grazie! Sapeva che alla fine sarebbe stato qualcosa di molto semplice. : P – Fourjays

0

cercare di vedere ciò che è veramente dentro la variabile $elem Basta fare una console.log($elem) Con entrambe Firefox e Firebug e si dovrebbe essere in grado di gestire abbastanza bene;)

Problemi correlati