Question

普通HTML输出;

<p><h1>Big title</h1>
foo bar foo bar foo bar</p>

我想要这样;

<p>
<h1>
<div class="someCls">Big</div>
<div class="someCls">Title</div>
</h1>
<div class="someCls">foo</div> 
<div class="someCls">bar</div> 
<div class="someCls">foo</div> 
<div class="someCls">bar</div> 
<div class="someCls">foo</div> 
<div class="someCls">bar</div>
</p>

我无法用jquery＆amp; amp;创建它的逻辑。 JavaScript的。你能救我吗？

Answer 1

您的标记存在问题，因为p无法将块元素作为其后代，所以

＆＃13;

$('div').contents().contents().addBack().each(function() {
  if (this.nodeType == 3) {
    $(this).replaceWith($(this.nodeValue.replace(/([^\s]+)/g, '<div class="somecalss">$1</div>')))
  }
})

＆＃13;

.somecalss {
  border: 1px solid red;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h1>Big title</h1>
  foo bar foo bar foo bar
</div>

＆＃13;

每个单词中的元素都添加了类？

1 个答案: