javascript - 通过 Jquery 围绕特定内容注入代码

Question

我和 jQuery 有点争吵。我正在尝试在 HTML 页面上的部分内容周围注入一个带有特定类的跨度。

例如，这是我拥有的 html：

<td class="">4 <a href="#">view</a></td>

而我想要的是

<td class=""><span class="num_cell">4</span> <a href="#">view</a></td>

我觉得这可能比我做的更容易——有人能帮忙吗？

Answer 1

这也应该有效：

$('td').each(function(){
    $(this).contents().first().wrap("<span class='num_cell'>");
})

Answer 2

如果你只想覆盖 textNode 你应该使用.contents()它也返回 textNodes 作为项目。

请检查文档http://api.jquery.com/contents/有一个例子是你问题的确切答案。

    $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

在您发表评论后，我认为您不需要循环，您可以尝试以下代码吗？

    $("td").contents().filter(function(){ return this.previousSibling == null && this.nodeType != this.TEXT_NODE; }).wrap("<span/>");

this.previousSibling == null表示如果你想检查它是否是第一个元素，它是第一个

干杯。

Answer 3

看看这个http://jsfiddle.net/zkjyV/30/

$(document).ready(function() {

$("td").each(function() {

    var $div = $(this);        
    var $a = $div.find("a"); 

    $div.find(a).remove();
    var number = $div.html();

   $div.html("<span class='num_cell'>"  + number + "</span>").append($a);
});


});​

我用一个 div 做到了，所以它可以在 jsFiddle 中运行。但是您可以将 div 替换为 a ，它应该可以正常工作:)

这是最终版本http://jsfiddle.net/zkjyV/33/

Answer 4

哇.. 已经有很多答案了，这是一个纯粹的 javascript 答案。我在单元格中添加了一个 ID 以使其简单，但您可以轻松地从那里获取它以使其通用..

HTML

<td class="" id="targetCell">4 <a href="#">view</a></td>​

JS：

    //get the parent reference to cache and avoid requerying the DOM
var parentCell = document.getElementById('targetCell');
// get the value of the first node (in this case TextNode)
var result = parentCell.firstChild.nodeValue;
// remove the TextNode
parentCell.removeChild(parentCell.firstChild);
// create a new span
var newSpan = document.createElement("SPAN");
//just for testing
newSpan.style.backgroundColor = 'orange';
//populate the value
newSpan.innerText = result;
//inject before the first child
parentCell.insertBefore(newSpan, parentCell.firstChild);​

JSFIDDLE：http: //jsfiddle.net/RBhLB/1/