jquery - 如何编写 jQuery prependTo 以获得我想要的结果？

Question

我有一个关于 jQuery prependTo 的问题。

这是html框架，我无法更改框架。

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

我想添加 <p></p>包装 .press-autho、.press-publisher 和 press-date。 结果应该是这样的:

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

然而，结果却变成了这样

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

我的代码是

$(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'));

});

如何编写可能是我想要的结果的代码？

谢谢大家。

Answer 1

您需要逐个部分进行工作:

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

Live Example | Source