Question

I have a question about jQuery prependTo.

This is the html framework, and I can’t change the framework.

<section class="press-item">
  <h2 class="press-title">press title 1</h2>
  <div class="press-author">Fraser Hughes</div>
  <div class="press-publisher">Evening Times</div>
  <time class="press-date" pubdate="">October 19, 2012</time>
  <div class="press-preview">press contain 1</div>
  <a class="press-more" href="" target="_blank">Read More</a> 
</section>

<section class="press-item">
  <h2 class="press-title">press title 1</h2>
  <div class="press-author">Fraser Hughes</div>
  <div class="press-publisher">Evening Times</div>
  <time class="press-date" pubdate="">October 19, 2012</time>
  <div class="press-preview">press contain 1</div>
  <a class="press-more" href="" target="_blank">Read More</a> 
</section>
</code>

I want to add a <p></p> to wrap .press-autho, .press-publisher and press-date.
The result should be like this:

<section class="press-item">
  <h2 class="press-title">press title 1</h2>
  <p>
    <div class="press-author">Fraser Hughes</div>
    <div class="press-publisher">Evening Times</div>
    <time class="press-date" pubdate="">October 19, 2012</time>
  </p>
  <div class="press-preview">press contain 1</div>
  <a class="press-more" href="" target="_blank">Read More</a> 
</section>

<section class="press-item">
  <h2 class="press-title">press title 1</h2>
  <p>
    <div class="press-author">Jeff Drake</div>
    <div class="press-publisher">Houston Chronicle</div>
    <time class="press-date" pubdate="">October 29, 2012</time>
  </p>
  <div class="press-preview">press contain 2</div>
  <a class="press-more" href="" target="_blank">Read More</a> 
</section>

However, The result became like this

    <section class="press-item">
      <h2 class="press-title">press title 1</h2>
      <p>
        <div class="press-author">Fraser Hughes</div>
        <div class="press-author">Jeff Drake</div>
        <div class="press-publisher">Evening Times</div>
        <div class="press-publisher">Houston Chronicle</div>
        <time class="press-date" pubdate="">October 19, 2012</time>
        <time class="press-date" pubdate="">October 29, 2012</time>
      </p>
      <div class="press-preview">press contain 1</div>
      <a class="press-more" href="" target="_blank">Read More</a> 
    </section>

    <section class="press-item">
      <h2 class="press-title">press title 1</h2>
      <p>
        <div class="press-author">Jeff Drake</div>
        <div class="press-publisher">Evening Times</div>
        <div class="press-publisher">Houston Chronicle</div>
        <time class="press-date" pubdate="">October 19, 2012</time>
        <time class="press-date" pubdate="">October 29, 2012</time>
      </p>
      <div class="press-preview">press contain 2</div>
      <a class="press-more" href="" target="_blank">Read More</a> 
    </section>

My code is

$(function () {
    var sources$ = $('<p class="post-listmeta"></p>'),
        targets$ = $('.press-title'),
        operation = 'after';
    targets$[operation](sources$);
    $('.press-publisher').prependTo($('.post-listmeta'));
    $('.press-author').prependTo($('.post-listmeta'));
    $('.press-date').prependTo($('.post-listmeta'));

});

How do I writ the code that could be the result that I want?

Thank you every one.

Answer 1

You need to work section-by-section:

$("section.press-item").each(function() {
    $(this).find(".press-author, .press-publisher, .press-date").wrapAll("<p>");
});

Live Example | Source