[jQuery] Cancellare porzione tag HTML con jQuery

[leonardobarbiero]

Ciao a tutti!
Io ho un problema e non ho la minima idea di come risolverlo.


Ho questa porzione codice HTML che devo modificarlo tramite jQuery.

<li class="menu"><a id="i6789" href="/?act=Msg&amp;CODE=01">Messenger <em>1</em></a></li>
Che dovrebbe diventare 

<li class="menu"><a id="i6789" href="/?act=Msg&amp;CODE=01"><img src="immagine.png"> <em>1</em></a></li>

Ho provato facendo così

$(document).ready(function() {
$(".menuwrap .left .menu:nth-child(2) > a").empty();
$(".menuwrap .left .menu:nth-child(2) > a").prepend("Prova");
});

soltanto che rimuove anche i tag em e non voglio che ciò accada: vi giuro che non so come uscirne.

Spero che qualcuno riesca ad aiutarmi.

[alemoppo]

Ci sono diverse soluzioni. Dipende però dallo script, in particolare da come cambia il testo:

Una soluzione banale, se la parte "<em>1</em>" rimane invariata, sarebbe di riscriverla con il nuovo testo.
(poi dipende: se hai molte righe in questo modo, e la lunghezza della stringa invariata rimane uguale, allora puoi ricavarla contando gli ultimi caratteri e inserirli alla fine della stringa).

Un'altra soluzione, se il testo da modificare è conosciuto a priori, puoi provare recuperando l'intero testo. Poi con la .replace() lo sostituisci e lo riassegni.

Un'altra soluzione forse più "generica", sarebbe di inserire un nuovo contenitore (tipo <span>) contenente soltanto la parte che vuoi modificare, quindi selezionare quest'ultimo con jQuery.

Ciao!

[karl94]

Con JQuery sembrerebbe complicato gestire i nodi di testo. Prova così:

$(".menuwrap .left .menu:nth-child(2) > a").toArray().forEach(function(e){e.firstChild.data = "Quel che ti serve"})

[leonardobarbiero]

Ci sono diverse soluzioni. Dipende però dallo script, in particolare da come cambia il testo:

Una soluzione banale, se la parte "<em>1</em>" rimane invariata, sarebbe di riscriverla con il nuovo testo.
(poi dipende: se hai molte righe in questo modo, e la lunghezza della stringa invariata rimane uguale, allora puoi ricavarla contando gli ultimi caratteri e inserirli alla fine della stringa).

Un'altra soluzione, se il testo da modificare è conosciuto a priori, puoi provare recuperando l'intero testo. Poi con la .replace() lo sostituisci e lo riassegni.

Un'altra soluzione forse più "generica", sarebbe di inserire un nuovo contenitore (tipo <span>) contenente soltanto la parte che vuoi modificare, quindi selezionare quest'ultimo con jQuery.

Ciao!

Prima di tutto grazie per la risposta. Purtroppo ciò che è contenuto dentro <em></em> è variabile perché rappresenta il numero di notifiche presenti (quindi può essere presente oppure variare da 1 a 100 mila volendo) quindi non è sfortunatamente possibile ricopiare. Per quanto riguarda la soluzione con .replace() non ho capito come possa funzionare: ho provato ma sembra non abbia intenzione di andare. Come nemmeno la soluzione con lo <span> ho capito. Ammetto che sono un po' ignorante, quindi per cortesia, se puoi, dirmi più precisamente cosa fare. Grazie ancora.

EDIT: ho provato con .replace() su con JSBin ma niente (ovviamente su un progetto prova). Ho usato questo codice.

$(document).ready(function () {
  $(".prova").text().replace('Mamma','<img src="immagine.png">');
});

Con JQuery sembrerebbe complicato gestire i nodi di testo. Prova così:

$(".menuwrap .left .menu:nth-child(2) > a").toArray().forEach(function(e){e.firstChild.data = "Quel che ti serve"})

Così ho risolto, ma vorrei davvero che me lo spiegassi :D Non riesco a capire i metodi usati e il perché e vorrei imparare :)
Grazie mille per la risposta :)

Non ho capito ma deve venire così?

    $(document).ready(function(){
		puliamo=$("a:contains('Messenger')").text('');	//puliamo 
		Aggicona=puliamo.append('<img src="immagine.png">'); //aggiunge icona
		Aggicona.append("<em>1</em>");  //lascia em tag
	});

[karl94]

Così ho risolto, ma vorrei davvero che me lo spiegassi :D Non riesco a capire i metodi usati e il perché e vorrei imparare :)
Grazie mille per la risposta :)

Non ho capito se hai risolto col mio codice, comunque il funzionamento è semplice: il metodo JQuery toArray restituisce un array appunto contenente gli elementi DOM nativi (non quelli di JQuery) della relativa collezione (nel tuo caso quelli che soddisfano il selettore che hai scritto tu). Su questo array uso poi il metodo JavaScript forEach che permette di eseguire una funzione per ogni elemento dell'array, che nello specifico va a prendere il primo nodo dell'elemento, nel tuo caso un nodo di testo, e modificarne l'attributo data, il quale contiene il testo che il nodo rappresenta.