CODEWITHSUNDEEP
jquery
mefisto
mefisto

Reputation: 3

How change text "label for" with jQuery (with internal "span")

How change text "Red" from "Yellow" with jQuery?

<label class="class_label" for="mycheck">
<span class="class_span"></span>
<input type="checkbox" id="mycheck"/>Red</label>

Upvotes: 0

Views: 503

Answers (4)

Ilia G
Ilia G

Reputation: 10211

How about this 

$(".class_label")[0].lastChild.nodeValue = "Yellow";

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

Assuming that the html structure will remain constant (in that 'red' will always be the last text-node of the label_class element), then the function below would work for you:

function replaceTextWith(oldWord,newWord,inWhichClass){
    var elems = document.getElementsByClassName(inWhichClass);
    var newTextNode;
    for (var i=0;i<elems.length;i++){
        if (elems[i].lastChild.nodeValue == oldWord && elems[i].className == inWhichClass) {
            elems[i].removeChild(elems[i].lastChild);
            newTextNode = document.createTextNode(newWord);
            elems[i].appendChild(newTextNode);
        }
    }
}

Call this in the format:

replaceTextWith('Red','Yellow','class_label');

JS Fiddle demo.

This could be jQuerified, but it seems moderately needless to do so (though it might certainly offer greater ease of customisation). In the linked (above) JS Fiddle demo I have used the onLoad event of the page to call the function, but if you're using jQuery anyway then you could just as easily wrap the function call in the $(document).ready({ /* ... */ }).

Note that the above function is case-sensitive, so 'red' != 'Red' for example. This could be amended with the following:

function replaceTextWith(oldWord,newWord,inWhichClass){
    var elems = document.getElementsByClassName(inWhichClass);
    var newTextNode;
    for (var i=0;i<elems.length;i++){
        /* first comparison:  converts both values to lower-case to be case-insensitive
           second comparison: explicitly checks the class-name, which *should* have
                              been in the first posted function, too (now edited in) */
        if (elems[i].lastChild.nodeValue.toLowerCase() == oldWord.toLowerCase() && elems[i].className == inWhichClass) {
            elems[i].removeChild(elems[i].lastChild);
            newTextNode = document.createTextNode(newWord);
            elems[i].appendChild(newTextNode);
        }
    }
}

JS Fiddle demo.

Upvotes: 0

Peter
Peter

Reputation: 12711

How about this? This removes the last text node of the label ("Red") and appends the new value ("Yellow").

var label = $('.class_label');
label.contents().last().remove();
label.append('Yellow');

Upvotes: 0

allaire
allaire

Reputation: 6045

.ready() is called when the page is loaded

add a span around Red, lets call it "foo" for this exemple

$(document).ready(function()
{
    $("#foo").html("Yellow");
});

The HTML will look like:

<label class="class_label" for="mycheck">
    <span class="class_span"></span>
    <input type="checkbox" id="mycheck"/><span id="foo">Red</span>
</label>

Upvotes: 0

Related Questions