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

【问题标题】：How to append a span as the last object in an li?如何将跨度附加为li中的最后一个对象？
【发布时间】：2017-08-11 19:06:20
【问题描述】：

我目前有这行代码

<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>

我需要它看起来像这样（* 注意 - 有多个 uls。因此它必须是每个“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>

【问题讨论】：

标签： javascript append insertafter

【解决方案1】：

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

我会这样写：

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

【讨论】：

这成功了！非常感谢。

【解决方案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>

【讨论】：