如何使用jquery在动态嵌套div中为文本添加div

Question

以下是嵌套div的HTML格式代码

<div>
   <div>
         Text 1
        <div>
            Text 2
        </div>
   </div>
</div

我想使用jquery或javascript

在下面进行此操作

    <div>
       <div>
             <span class="custom">Text 1</span>
            <div>
                <span class="custom">Text 2</span>
            </div>
       </div>
    </div

Answer 1

＆＃13;

＆＃13;

$('div').contents().filter(function() {
  return this.nodeType == 3;
}).wrap("<span class=custom></span>")

＆＃13;

.custom {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    Text 1
    <div>
      Text 2
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

1. 使用节点3作为锚点，因为它是文本。
2. 使用.wrap()来换算span
中的文字

Answer 2

$([your element selector here]).contents()
                               // get all text nodes
                               .filter(function(){return this.nodeType === 3})
                               // wrap in a span element
                               .wrap('<span />')
                               // add class custom to each element
                               .addClass('custom');