替換文本<a>標記其中包含<i>

我有一個錨標記，它包含嵌套的圖標和一些文本。當我嘗試更新文本時，圖標被刪除。這裏是例子：替換文本<a>標記其中包含<i>

其中包含：

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")替換選擇器，但無濟於事。任何幫助，將不勝感激。

乾杯

來源

2013-06-29 HennyH

如果你可以改變你的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-29 07:55:09

我不認爲'文本（）'在文本節點上工作。你的代碼在小提琴上 - http://jsfiddle.net/Dogbert/FZWyj/16/讓我知道如果我在這裏犯了一個錯誤。 – Dogbert

嗯。我可以發誓，它曾經工作。必須對此進行調查。謝謝！ –

Felix，我最終做了一個'$ .each（.contents（），... if（this.nodeType === 3）{...}）' – HennyH

好，那是因爲你更換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-29 07:49:49 AndreM96

我不知道很多有關jQuery的，但如果我理解正確的，你想不刪除舊更新的文本？

在純JavaScript我會做如下：

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

來源

2013-06-29 07:50:46 GFP

請始終檢查您的答案，並確保您的代碼使用正確的語法和格式。 –

文本方法去除整個<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

來源

2013-06-29 07:51:14

你可以嘗試只更新數在你的字符串是這樣的：

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

jsFiddle here

來源

2013-06-29 07:51:48

謝謝@koala_dev我喜歡在這裏使用正則表達式 – HennyH

要改變的值第一個Text節點，你可以這樣做：

$(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-29 07:52:17 Dogbert

這正是我正在尋找的解決方案。我意識到它正在取代內部html（來自我的嘗試），並且正在尋找一種方法來區分文本本身。謝謝:) – HennyH

另外，使用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>

Click處理程序：

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

來源

2013-06-29 08:27:57 KooiInc

替換文本<a>標記其中包含<i>

回答

相關問題