javascript - 在元素中查找未包裹在 html 标签中的文本,并用 <p> 包裹它

标签 javascript jquery html web word-wrap

<div class="menu-content">
  <h3>Lorem Ipsum</h3>
  TEXT THAT NEEDS TO BE WRAPPED
  <ul>
    <li>List Item 1</li>
  </ul>
</div>

我得到了上面的代码(它是自动生成的,所以我不能手动包装文本),我需要过滤“.menu-content”的内容并找到没有包装在 html 标签中的文本然后将该文本包装在 p 标记中。

我尝试了以下 jQuery 代码:

$('.menu-content').find(':not(h3, ul)').wrap('<p></p>');

最佳答案

使用 contents() filter() 获取文本节点

$('.menu-content')
  .contents() // get all child node including text and comment 
  .filter(function() { // filter the text node which is not empty
    return this.nodeType === 3 && $.trim(this.textContent).length
  }).wrap('</p>'); // wrap filtered element with p
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-content">
  <h3>Lorem Ipsum</h3>
  TEXT THAT NEEDS TO BE WRAPPED
  <ul>
    <li>List Item 1</li>
  </ul>
</div>

关于javascript - 在元素中查找未包裹在 html 标签中的文本,并用 <p> 包裹它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37506770/

相关文章:

javascript - 将 style.background 设置为 var 不起作用

javascript - jQuery 的简单子(monad)菜单故障

javascript - 在页面刷新时重置滚动位置,在现代浏览器上不起作用

html - SVG 不显示在 Safari 的 img 标签中

获取类似excel的列名的Javascript算法

javascript - Jest 测试一个没有返回值的函数

javascript - 如何避免跳过第二个数组中的数组索引?

javascript - 如何使用 jQuery 选择文本区域内的所有 URL?

HTML CSS - 图片不显示?

javascript - 如何为函数建立全局变量 - Polymer