Supponiamo di voler usare il metodo di jQuery text() solo sul testo direttamente contenuto in un elemento senza modificare il testo dei suoi discendenti. Sfortunatamente ciò non è possibile. Dobbiamo trovare una soluzione alternativa.
Possiamo definire il seguente plugin che seleziona e modifica solo i nodi di testo direttamente discendenti da un dato elemento:
(function ($) {
$.fn.smartext = function (text) {
var that = this,
element = this[0],
children = element.childNodes;
if (children.length > 0) {
var textNodes = [];
for (var i = 0; i < children.length; i++) {
var node = children[i];
if (node.nodeType == 3 && !/^\s+$/.test(node.nodeValue)) {
textNodes.push(node);
}
}
for (var j = 0; j < textNodes.length; j++) {
var textNode = textNodes[j];
var textN = document.createTextNode(text);
element.replaceChild(textN, textNode);
}
} else {
that.text(text);
}
return that;
};
})(jQuery);
Il nostro plugin scarta anche i nodi di testo vuoti. Un esempio:
$(function () {
$('#text').on('click', function () {
$('#test').smartext('Foo');
});
});