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和按日期。结果应该是这样的：

<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

Answer 2

试试这个：

$($('section')[0]).find('.press-title,.press-author,.press-publisher').wrapAll('<p/>');

这里 $（'section'）[0] 将返回第一部分（您可以循环执行相同的更多此类部分），然后您要查找所需的元素要包含 .find（'。press-title，.press-author，.press-publisher'），然后 wrapAll 将执行剩余的工作。< / p>

如何为我想要的结果编写jQuery prependTo？

2 个答案: