2

我有一个关于 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'));

});

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

谢谢大家。

4

2 回答 2

0

您需要逐节工作：

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

实例| 来源

于 2012-12-06T07:53:17.917 回答
0

试试这个 ：

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

这里$('section')[0]将返回第一部分（您可以循环以对更多此类部分执行相同的操作），然后您必须查找要使用.find('.press包装的元素-title,.press-author,.press-publisher')，然后wrapAll将完成剩下的工作。

于 2012-12-06T08:02:19.317 回答