如何使用jquery在HTML/CSS中选择未包装文本？

Question

我有一个正在使用的表单，它有一些未包装的文本。我没有访问HTML文件的权限，所以我选择它的唯一方法是通过Jquery (我已经被告知了)。这就是HTML的样子：

<div class="input-entry">
<div class="input-area">
<div class="input-checkbox">
<input type="checkbox" name="accept"> 
I Accept
</div>
</div>
</div>

我需要选择“我接受”来包装一个<label>。我对jQuery不太了解，但我确实尝试过这样做：

$("div.input-area:contains('I Accept')").wrap("<label for='accept'></label>");

乍一看，我认为这是可行的，但我忽略了解释:contains选择器的功能。

是否可以简单地使用Jquery包装它？

Answer 1

可以，您需要获取内容，然后按节点类型进行筛选(nodeType '3‘是文本节点)：

$("div.input-checkbox:contains('I Accept')").contents().filter(function(){
    return this.nodeType === 3;
}).wrap("<label for='accept'></label>");

我也改变了你最初的选择。

http://jsfiddle.net/mb1yg111/

Answer 2

也许它不漂亮，但你可以用它来实现它：

$(".input-checkbox").html(
     $(".input-checkbox").html().replace(
         'I Accept',
         "<label for='accept'>I Accept</label>"));

JSFiddle演示：http://jsfiddle.net/lparcerisa/h98egbpv/

Answer 3

要选择的节点是文本节点。有点不方便，但有可能。您可以在这个问题中找到详细的描述：How do I select text nodes with jQuery?

简言之：

$(elem)
  .contents()
  .filter(function() {
    return this.nodeType === 3; //Node.TEXT_NODE
  });