2
4

7 回答 7

3

要更改第一个文本节点的值，您可以这样做：

$(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/

于 2013-06-29T07:52:17.357 回答
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 文本节点），因此可能需要检查文本节点的内容。

于 2013-06-29T07:55:09.603 回答
1

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

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

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

于 2013-06-29T07:49:49.050 回答
1

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

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

工作小提琴

于 2013-06-29T07:51:14.170 回答
1

您可以尝试像这样更新字符串中的数字：

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

jsFiddle在这里

于 2013-06-29T07:51:48.560 回答
1

或者，使用 css3 您可以使用具有数据属性span的元素：

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);
 });
于 2013-06-29T08:27:57.327 回答
0

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

在纯 JavaScript 中，我会执行以下操作：

link = document.getElementById("link");
link.innerHTML = link.innerHTML + " new text";
于 2013-06-29T07:50:46.650 回答