Question

我在页面上重复了几次以下标记：

<div class="RebalanceCellBroadACName">
   <img src="someimage.png" />
   Accounts
</div>

我希望使用jquery在类别为.orange-category的范围内仅包含单词“accounts”。我发现了以下内容：

$(".RebalanceCellBroadACName").wrapInner("<span class='orange-category' />");

包装图像和文本。这在控制台中输入时会返回连接在一起的文本的所有实例：

$(".RebalanceCellBroadACName").text();

然而，以下内容返回错误“undefined is is a function”，我认为这是因为我选择的是字符串而不是jQuery对象。

$(".RebalanceCellBroadACName").text().wrapAll("<span class='orange-category' />");

因此，如何通过jquery最好地实现以下结果，我们将不胜感激：

<div class="RebalanceCellBroadACName">
   <img src="someimage.png" />
   <span class='orange-category' />Accounts</span>
</div>

对于页面上的.RebalanceCellBroadACName的每个实例。感谢您的帮助。

Answer 1

解决方案：

$(".RebalanceCellBroadACName").each(function(){
    var img = $('img', this).detach();
    $(this).wrapInner("<span class='orange-category' />").prepend(img);
})

Answer 2

虽然您无权访问文本节点，但您可以访问DOM元素的子项。

所以基本上你可以克隆父节点，删除子节点，包装文本，最后用原文替换它。

$(".RebalanceCellBroadACName").each(function(){
    var $this = $(this);

    var all_text = $this.html();
    var clean_text = $this.clone()    //clone the element
                       .children() //select all the children
                       .remove()   //remove all the children
                       .end()  //again go back to selected element
                       .text().trim();
    var new_text = "<span class='orange-category'>"+clean_text+"</span>"    

    $this.html(all_text.replace(clean_text, new_text));
})

http://jsfiddle.net/p2he9h2k/

仅包装jquery中选择内的文本

2 个答案: