jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Home page > DOM > Racchiudere il contenuto di un elemento... in un altro elemento

Racchiudere il contenuto di un elemento... in un altro elemento

martedì 12 settembre 2006, di Renato

Una semplice tecnica utile ad inserire tra un elemento ed il suo contenuto, un altro elemento, ad esempio un link.


Il nostro obiettivo è di trasformare questo frammento di HTML

<div class="linkami">
 vorrei essere un link!
</div>

in

<div id="linkami">
 <a href="#">vorrei essere un link!</a>
</div>

Creeremo una funzione che riceve in argomento il codice HTML che andrà a racchiudere il contenuto degli elementi a cui la applicheremo.

Supponiamo di avere nella variabile this l’elemento a cui vogliamo applicare la trasformazione.

Memorizziamo in un’altra variabile l’oggetto jQuery che ci consentirà di manipolarlo:

var o = $(this);

Creiamo l’elemento <a href="#"></a> da inserire attorno al contenuto di o. Basta creare un oggetto jQuery passando in argomento il codice HTML dell’elemento stesso : $('<a href="#"></a>')

A questo punto, il nostro link è pronto. Inseriamo ora il testo del link grazie alla funzione append:

$('<a href="#"></a>').append(o.html())

dove o.html() ci restituisce il contenuto HTML di o

Il nostro link deve ora essere inserito al posto del contenuto di o, richiamando la funzione appendTo, ma non prima di aver svuotato quest’ultimo grazie alla funzione empty!!

$('<a href="#"></a>').append(o.html()).appendTo(o.empty());

Ora basterà impacchettare il tutto in una bella funzione:

$.fn.wrapInner = function(e) {
    return this.each(function(){
                 var o = $(this);
                 $(e).append(o.html()).appendTo(o.empty());
    });
};

ed eseguire la trasformazione

 $("#linkami").wrapInner('<a href="#"></a>')

P.S.

Questa funzione si ispira all’omonima scritta da Christian Bach

Documenti allegati

Rispondere all'articolo


Ultimi commenti

Novità sul Web