jquery 在DOM中将一个元素移动到另一个元素之下

vulvrdjw  于 4个月前  发布在  jQuery
关注(0)|答案(2)|浏览(62)

努力让这段代码工作,将.Meta div移动到DOM中的h3下面。它工作,但它的两倍,因为页面上有2个此代码的示例,我希望它两次都工作,但不显示两个版本的.meta div.

(function($) {
  $('.home_FeedsWrapper .vc_col-sm-4 .post-header .meta').each(function() {
    $(this).insertAfter($('h3'));
  });
})(jQuery);

个字符

wwtsj6pe

wwtsj6pe1#

请考虑以下情况。

(function($) {
  $('.home_FeedsWrapper .vc_col-sm-4 .post-header').each(function(i, el) {
    var meta = $(".meta", el).detach();
    meta.insertAfter($("h3", el));
  });
})(jQuery);

个字符
这确保了每个header都被检查,并且元素只在该header中移动。首先,我们分离Span,然后将其插入到Header3之后。

odopli94

odopli942#

您应该像这样在nexth3之后插入每个日期:

$(this).insertAfter($(this).next("h3"));

字符串

$('.home_FeedsWrapper .vc_col-sm-4 .post-header .meta').each(function() {
  $(this).insertAfter($(this).next("h3"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home_FeedsWrapper">
  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta"> 23 November 2022 </span>
        <h3 class="title">This is the title here</h3>
      </div>
    </div>
  </div>
  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta">18 October 2022 </span>
        <h3 class="title">This is another title that sits here</h3>
      </div>
    </div>
  </div>
</div>

的数据

相关问题