CODEWITHSUNDEEP
javascriptjqueryhtml
Nately Jamerson
Nately Jamerson

Reputation: 313

preserve string value doing text() in jquery

I have this string

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

I want to wrap pagi with pagiWrap but in the same time I want to preserve the html tag.

This won't work

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

Because The html tag will be gone. If I do .html(), it will render altogether with my wrapper which I don't want.

I've also tried htmlDecode($(this).html()) it doesn't work. Any clue?

Upvotes: 1

Views: 79

Answers (4)

Carsten Massmann
Carsten Massmann

Reputation: 28196

Why do you make things so complicated? Remember: jQuery - write less, do more?
The way I see this is, you can do it with a simple

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

see here in my snippet:

$(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>

The console output was only added to show the result as html code.

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

Use wrap() method and do something like this.

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>

You can also use replaceWith() method here.

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>

Upvotes: 1

guradio
guradio

Reputation: 15555

$('.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>

use .text() with .html()

Upvotes: 0

haxxxton
haxxxton

Reputation: 6442

I would suggest starting with the element you wish to be the "wrapper" and work inward. Using the jQuery .wrap method to enclose your 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

Upvotes: 0

Related Questions