[jQuery] 要素の順番を入れ替える方法について

Question

要素の順番を入れ替える処理について質問です。

	    <div class="item text-item">
	      <p style="margin: 0px;">テキスト1</p>
	      <ul class="editpager clearfix unvisible">
		<li class="first-order">一番上へ</li>
		<li class="minus-order">上へ</li>
		<li class="plus-order">下へ</li>
		<li class="last-order">一番下へ</li>
              </ul>
	    </div>
	    <div class="item text-item">
	      <p style="margin: 0px;">テキスト2</p>
	      <ul class="editpager clearfix unvisible">
		<li class="first-order">一番上へ</li>
		<li class="minus-order">上へ</li>
		<li class="plus-order">下へ</li>
		<li class="last-order">一番下へ</li>
              </ul>
	    </div>
	    <div class="item text-item">
	      <p style="margin: 0px;">テキスト3</p>
	      <ul class="editpager clearfix unvisible">
		<li class="first-order">一番上へ</li>
		<li class="minus-order">上へ</li>
		<li class="plus-order">下へ</li>
		<li class="last-order">一番下へ</li>
              </ul>
	    </div>

上記のｐ要素（テキスト1,2,3）を、一番上（下）へ、上（下）への四種類をクリックすると要素が任意の順に入れ替わるコードを書きたいのです。

【考えた方法】
四種類のli要素のclass名がテキスト1,2,3下でそれぞれ同じなので、クリックしたli要素の親要素を取得して順を入れ替えるのが最適かと思いました（p要素のテキスト1,2,3いずれかの、子要素のいずれかをクリックしたとき、そのクリックした要素の親要素がテキスト1,2,3のどれなのかを特定、取得する、という意）。

【考えたコード】
一番下へ、がクリックされた際のコードです。
現在は.last-orderがクリックされた際、どの要素内なのかを特定、取得する処理まで書きました。

$('.last-order').click(function(){
    var i = $(this).parent().find("p");
});

しかしこのコードではどうやらp要素を変数iに格納できていないようなのです。
console.log(i)でコンソールでiの中身を確認したのですが、よくわからず、HTML内にdiv要素を作ってテキストで出力しようと試みるも、Object objectと出力されました（テキスト1（,2,3）が出力されると予想したのですが）。
エラーも出ないので、どの箇所が問題なのかを教えてください。

Answer 1

【考えたコード】では、クリックされた.last-orderクラスの親要素ulに存在しないpタグを探しています。
findメソッドの戻り値はjQueryオブジェクトなので、
lengthプロパティが0のjQueryオブジェクトが取得されています。
https://api.jquery.com/find/

.last-orderクラスの親要素ulの親要素divからはpタグを取得できます。

var i = $(this).parent().parent().find("p");
console.log(i.html());

一致する最初の要素を取得するclosestを使用した方が読みやすいです。
https://api.jquery.com/closest/

var i = $(this).closest('div').find('p');

Answer 2

<style>
.item{display:flex;}
.editpager{display:flex;list-style:none;margin:0}
.editpager li:not(:first-child):before{content:"|";}
</style>
<script>
$(function(){
  $('.first-order').on('click',function(){
    $('.item:first').before($(this).closest('.item'));
  });
  $('.last-order').on('click',function(){
    $('.item:last').after($(this).closest('.item'));
  });
  $('.minus-order').on('click',function(){
    $(this).closest('.item').prev('.item').before($(this).closest('.item'));
  });
  $('.plus-order').on('click',function(){
    $(this).closest('.item').next('.item').after($(this).closest('.item'));
  });
});
</script>
<div class="item text-item">
<p style="margin: 0px;">テキスト1</p>
<ul class="editpager clearfix unvisible">
<li class="first-order">一番上へ</li>
<li class="minus-order">上へ</li>
<li class="plus-order">下へ</li>
<li class="last-order">一番下へ</li>
</ul>
</div>
<div class="item text-item">
<p style="margin: 0px;">テキスト2</p>
<ul class="editpager clearfix unvisible">
<li class="first-order">一番上へ</li>
<li class="minus-order">上へ</li>
<li class="plus-order">下へ</li>
<li class="last-order">一番下へ</li>
</ul>
</div>
<div class="item text-item">
<p style="margin: 0px;">テキスト3</p>
<ul class="editpager clearfix unvisible">
<li class="first-order">一番上へ</li>
<li class="minus-order">上へ</li>
<li class="plus-order">下へ</li>
<li class="last-order">一番下へ</li>
</ul>
</div>
<div class="item text-item">
<p style="margin: 0px;">テキスト4</p>
<ul class="editpager clearfix unvisible">
<li class="first-order">一番上へ</li>
<li class="minus-order">上へ</li>
<li class="plus-order">下へ</li>
<li class="last-order">一番下へ</li>
</ul>
</div>
</div>