javascript - 在 jquery 中执行 text() 时保留字符串值

Question

我有这个字符串

<div>
   <p class="pagi">page 1 content</p> 
   <p class="pagi">page 2 content</p>
   <p class="pagi">page 3 content</p>
</div>

我想用 pagiWrap 包装 pagi 但同时我想保留 html 标签。

这行不通

var $pagi= $(str).find('.pagi');
var html= '<div id="#main-wrapper">';
$pagi.each(function() {
  html+= '<div class="pageWrap">' + $(this).text() + '</div>';
});
html+= '</div>';

因为html标签将会消失。如果我执行 .html()，它将与我不想要的包装器一起渲染。

我也尝试过 htmlDecode($(this).html()) 它不起作用。有什么线索吗？

Answer 1

使用wrap()方法并执行类似的操作。

var str = '<div><p class="pagi">page 1 content</p><p class="pagi">page 2 content</p><p class="pagi">page 3 content</p></div>';

var pagi = $(str)
  // wrap the outer div
  .wrap('<div id="main-wrapper"></div>')
  // get pagi
  .find('.pagi')
  // wrap it
  .wrap('<div class="pageWrap"></div>')
  // get the wrapped element
  .closest('.pageWrap')
  // update the text content by its html content
  .text(function() {
    return $(this).html()
  })
  // get outer wrapper by id
  .closest('#main-wrapper')
  // get html content from DOM object
  [0].outerHTML;

document.body.innerHTML = pagi;

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

<小时/>

您还可以使用replaceWith()方法在这里。

var str = '<div><p class="pagi">page 1 content</p><p class="pagi">page 2 content</p><p class="pagi">page 3 content</p></div>';

var pagi = $(str)
  // wrap the outer div
  .wrap('<div id="main-wrapper"></div>')
  // get pagi
  .find('.pagi')
  // replace the elements
  .replaceWith(function() {
    // generate element which is to be placed
    // instead of current element
    return $('<div/>', {
      class: "pageWrap",
      // set the text as the html content
      text: this.outerHTML
    });
  })
  // back to the cached previous selector
  .end()
  // get outer wrapper by id or use .parent()
  .closest('#main-wrapper')
  // get html content from DOM object
  [0].outerHTML;

document.body.innerHTML = pagi;

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