Question

我有一个锚标记，其中包含嵌套图标和一些文本。当我尝试更新文本时，图标将被删除。这是一个例子：

其中包含：

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/

Answer 2

如果您可以更改HTML，则可以将数字放在自己的span元素中：

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

然后您可以选择该元素并更改其内容：

$(this).children('.counter').text(selectCount);

但是，如果您无法更改HTML：

我尝试用$(this).children(":text")替换选择器，但无济于事。

您无法使用选择器选择文本节点。但是，您可以使用.contents来获取所有子节点，而不仅仅是元素节点。然后，您可以.filter要更改的节点的节点：

$("#bin").click(function(){
   selectCount++;
   $(this).contents().filter(function() {
       return this.nodeType === 3 && this.nodeValue.indexOf("Remove Selected") > -1;
   }).get(0).nodeValue = " Remove Selected ("+selectCount+")";
});

由于a元素也可能包含其他文本节点（HTML代码中的每个换行符和缩进都将转换为DOM文本节点），因此可能需要检查文本节点的内容。

Answer 3

嗯，那是因为您替换了a标记的全部内容。尝试这样的事情：

$(function(){
    var selectCount = 0;
    $("#bin").click(function(){
        selectCount++;
        $(this).html('<i class="icon-trash"></i> Remove Selected ('+selectCount+')');
    });
});

小提琴：http://jsfiddle.net/FZWyj/18/

Answer 4

文本方法也删除整个<i class=icon-trash></i>。使用html并应用图标类

$(function(){
    var selectCount = 0;
    $("#bin").click(function(){
      selectCount++;
      $(this).html("<i class=icon-trash></i> Remove Selected ("+selectCount+")");
    });
});

WORKING FIDDLE

Answer 5

您可以尝试更新字符串中的数字，如下所示：

$(function(){
  var selectCount = 0;
  $("#bin").click(function(){
    selectCount++;
    $(this).html($(this).html().replace(/\d+/, selectCount));
  });
});

jsFiddle here

Answer 6

或者，使用css3，您可以将span元素与data attribute:

一起使用

的CSS：

span[data-iterator]:before {
    content: attr(data-iterator);
}

HTML：

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

点击处理程序：

 $("#bin").click(function(){
   $(this).find('[data-iterator]').attr('data-iterator',++selectCount);
 });

Answer 7

我对jQuery了解不多，但是当我理解正确时，您想要更新文本而不删除旧文本吗？

在纯JavaScript中，我会这样做：

link = document.getElementById("link");
link.innerHTML = link.innerHTML + " new text";

替换<a> tag which contains an <i></i></a>中的文字

7 个答案: