使用Javascript或jQuery </span>用<span>元素换行文本

Question

我的页面上有以下HTML代码。没有包含元素，它只在body。

中

<b>SqFt per Carton: </b>24.30<br>

使用脚本，我想将24.30包含在带有类的span标记中，以便结果如下所示：

<b>SqFt per Carton: </b><span class="sqft_cart">24.30</span><br>

我该怎么做？

Answer 1

这是通过迭代文档中所有文本节点（即没有任何标记的文本）来实现所要求的jQuery方法，如果它们在<b>标记之后立即用{{1}替换它们有适当的班级：

<span>

Live test case

Answer 2

$("b").parent().contents().filter(function() {
    return this.nodeType != 1;
}).wrap("<span class='sqft_cart'></span>");

http://jsfiddle.net/FW8Ct/4/

Answer 3

你可以使用

获得每箱的SqFt值：24.30

var takentext = $("class Or ID of SqFt per Carton").text();
$("class of span").text(takentext);

Answer 4

由于您没有包含元素，因此可以使用.nextSibling()获取24.30的文本节点。然后.insertAdjacentHTML()在删除旧文本节点后插入新的span。由于我不知道您网页的其余部分是什么样的，因此我假设可能有多个<b>元素，但代码将以任何方式工作。

演示：http://jsfiddle.net/ThinkingStiff/6ArzV/

脚本：

var bs = document.getElementsByTagName( 'b' );

for( var index = 0; index < bs.length; index++ ) {

    if( bs[index].innerHTML.indexOf( 'SqFt per Carton:' ) > -1 ) {
        var text = bs[index].nextSibling,
            span = '<span class="sqft_cart">' + text.nodeValue + '</span>';
        text.parentNode.removeChild( text );
        bs[index].insertAdjacentHTML('afterEnd', span);
    };

};

HTML：

<b>SqFt per Carton: </b>24.30<br>
<b>Price per Carton: </b>193.00<br>
<b>SqFt per Carton: </b>12.90<br>
<b>Price per Carton: </b>147.00<br>
<b>SqFt per Carton: </b>14<br>

CSS：

.sqft_cart {
    color: red;
}

输出：