如何将范围追加为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>

我需要它看起来像这样(* 注意 - 有多个 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>

Answer 1

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

我会这样写：

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

Answer 2

只需将跨度附加到 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>