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中运行。但你可以用a代替div，它应该可以正常工作：）

这是最终版本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/

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

4 个答案: