javascript - 替换包含 <i> 的 <a> 标记中的文本

Question

我有一个 anchor 标记，其中包含嵌套图标和一些文本。当我尝试更新文本时，该图标被删除。这是示例:

jsfiddle

其中包含:

HTML:

<a class="btn btn-danger" id="bin"><i class="icon-trash"></i> Remove Selected (0)</a>

JS:

$(function(){
    var selectCount = 0;
    $("#bin").click(function(){
        selectCount++;
        $(this).text(" Remove Selected ("+selectCount+")");
    });
});

我尝试将选择器替换为 $(this).children(":text") 但无济于事。任何帮助将不胜感激。

干杯

Answer 1

要更改第一个文本节点的值，您可以执行以下操作:

$(function(){
    var selectCount = 0;
    $("#bin").click(function(){
        selectCount++;
        for(var i = 0; i < this.childNodes.length; i++) {
            var childNode = this.childNodes[i];
            if(childNode.nodeType === 3) {
                childNode.textContent = " Remove Selected ("+selectCount+")";
                return;
            }
        }
    });
});

nodeType === 3 表示文本节点 - 更多详细信息:https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType

http://jsfiddle.net/Dogbert/FZWyj/13/