У меня есть эта строка

<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()) это не работает. Любая подсказка?

1
Nately Jamerson 11 Янв 2017 в 09:28

4 ответа

Лучший ответ

Используйте 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>
1
Pranav C Balan 11 Янв 2017 в 07:04
$('.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()

0
guradio 11 Янв 2017 в 06:46

Я бы предложил начать с того элемента, который вы хотите быть «оберткой», и работать внутри. Используя метод 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

0
haxxxton 11 Янв 2017 в 06:39

Почему вы делаете все так сложно? Помните: 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-кода.

0
cars10m 11 Янв 2017 в 07:09