Question

如何使用jQuery从“Yellow”更改文本“Red”？

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

Answer 1

这个怎么样

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

Answer 2

加载页面时会调用<。> .ready（）

在Red周围添加一个范围，让我们称之为“foo”这个例子

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

HTML将如下所示：

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

Answer 3

这个怎么样？这将删除标签的最后一个文本节点（“红色”）并附加新值（“黄色”）。

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

Answer 4

假设html结构将保持不变（因为'red'将永远是label_class元素的最后一个文本节点），那么下面的函数对你有用：

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);
        }
    }
}

以下列格式调用：

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

JS Fiddle demo

这可能是jQuerified，但这似乎是不必要的（虽然它可能肯定提供更容易的定制）。在链接（上面）JS Fiddle demo中，我使用页面的onLoad事件来调用函数，但是如果你正在使用jQuery那么你可以轻松地将函数调用包装在{ {1}}。

请注意，上述函数区分大小写，例如$(document).ready({ /* ... */ })。这可以通过以下方式进行修改：

'red' != 'Red'

JS Fiddle demo

如何使用jQuery更改文本“label for”（带有内部“span”）

4 个答案: