如何将跨度附加为 li 中的最后一个对象？

Question

我目前有这行代码

<div id="news-articles">
  <ul class="display-posts-listing">
    <li class="listing-item">
      <span></span>
      <span class="category-display"></span>
      <span></span>
      <span></span>
    </li>
  </ul>
</div>

我需要它看起来像这样（* 注意 - 有多个 ul。因此它必须是每个 "span.category-display" 最后附加在它们自己的父 li 中）：

//Ive been trying to use this js script, but so far no results. Can anyone assist? Thanks so much! :





  $("#news-articles .category-display").each(function() {
                $(this).prev("li.listing-item").append(this);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="news-articles">
  <ul class="display-posts-listing">
    <li class="listing-item">
      <span></span>
      <span></span>
      <span></span>
      <span class="category-display"></span>
    </li>
  </ul>
</div>

Answer 1

$.prev() 选择前一个兄弟。你想使用 $.parent()

我会这样写：

$(".listing-item").each(function(){
    $this = $(this);
    var $elem = $this.find(".category-display").detach();
    $elem.appendTo($this);
});

Answer 2

只需将 span 附加到 LI，它就会在底部结束

$('.listing-item').append(function() {
  return $(this).find('.category-display');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="news-articles">
  <ul class="display-posts-listing">
    <li class="listing-item">
      <span>1</span>
      <span class="category-display">4</span>
      <span>2</span>
      <span>3</span>
    </li>
  </ul>
  <br />
  <ul class="display-posts-listing">
    <li class="listing-item">
      <span>1</span>
      <span class="category-display">4</span>
      <span>2</span>
      <span>3</span>
    </li>
  </ul>
</div>

如何将跨度附加为 li 中的最后一个对象？

How to append a span as the last object in an li?

javascript

append

insertafter