Question

我有字符串

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

我想用pagi包裹pagiWrap，但同时我要保留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>

Answer 2

$('.pagi').parent('div').text($('.pagi').parent('div').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="pagi">page 1 content</p>
  <p class="pagi">page 2 content</p>
  <p class="pagi">page 3 content</p>
</div>

将.text()与.html()

一起使用

Answer 3

我建议从你希望成为“包装器”的元素开始并向内工作。使用jQuery .wrap方法来封装你的html。

// create wrapper element
var wrapper = $('<div id="#main-wrapper" />');
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>';
// set the wrappers html, then find our pagi elements and wrap each
wrapper.html(str).find('.pagi').wrap('<div class="pagiWrap" />');
// now set the pagiWrap elements text to their current html
wrapper.find('.pagiWrap').each(function(){
    $(this).text($(this).html());
})
// output wrapper
$('#output').html(wrapper);

<强> JSFIDDLE

Answer 4

为什么你这么复杂？记住： jQuery - 少写，多做？
我看到这个的方式是，你可以用一个简单的

来做到这一点

$('.pagi').wrap('<div class="pagewrap">');

请参阅我的代码段：

$(function(){
  $('.pagi').wrap('<div class="pagewrap">');
  console.log($('#outer').html());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
   <p class="pagi">page 1 content</p> 
   <p class="pagi">page 2 content</p>
   <p class="pagi">page 3 content</p>
</div>

仅添加控制台输出以将结果显示为html代码。

保留字符串值在jquery中执行text（）

4 个答案: