jQuery:每次比赛appendTo只有一次

Question

需要将span .cat的内容抛到上面的div，但是这个事件会将所有的span .cat抛给每个div。

在我离开的路上

date category category2 category3
date category category2 category3
date category category2 category3

我需要吗？

date category
date category2
date category3

​

$(document).ready(function() {
  $('.bdt-post-grid-category').wrapInner('<span class="bdt-post-grid-date cat"></span>');
  $('.bdt-post-grid-date.cat').appendTo($(".bdt-post-grid-meta"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category2</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category3</a>
</div>

​

Answer 1

使用.each()分别处理每个元素，只需附加到前面的元素。

​

$(document).ready(function() {
  $('.bdt-post-grid-category').wrapInner('<span class="bdt-post-grid-date cat"></span>');
  $('.bdt-post-grid-date.cat').each(function() {
    $(this).appendTo($(this).closest(".bdt-post-grid-category").prev());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category2</a>
</div>

<div class="bdt-post-grid-meta bdt-subnav bdt-flex-middle">
  <span class="bdt-post-grid-date">date</span>
</div>
<div class="bdt-post-grid-category bdt-position-small bdt-position-top-left">
  <a href="#" rel="category tag">category3</a>
</div>

​