JQuery - Divs/Rowsを移動する

Question

私は行セットを持っています。行を選択するためにonclickを実行しようとしています。行を兄弟化する前または後に移動します。

私は、要素を選択して移動するためのinsertBefore()、insertAfter()、prev()、そしてnext()のシリーズを使用しようとしています。私はこれらが良い方法であるかどうか、あるいは彼らの廃止予定時間などに達しているかどうかは分かりません。

は、コードは以下の通りです：

HTML

<div> 
    <div class="row"> 
     <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-12 medium-5 large-5 columns"></div> 
     <div class="show-for-medium-up medium-1 large-1 columns"> 
     <div class="row"> 
      <div class="small-6 columns close-thik"></div> 
      <div class="small-6 columns arrow"> 
       <div class="arrow-up"></div> 
       <div class="arrow-down"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-12 medium-5 large-5 columns"></div> 
     <div class="show-for-medium-up medium-1 large-1 columns"> 
     <div class="row"> 
      <div class="small-6 columns close-thik"></div> 
      <div class="small-6 columns arrow"> 
       <div class="arrow-up"></div> 
       <div class="arrow-down"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-12 medium-5 large-5 columns"></div> 
     <div class="show-for-medium-up medium-1 large-1 columns"> 
     <div class="row"> 
      <div class="small-6 columns close-thik"></div> 
      <div class="small-6 columns arrow"> 
       <div class="arrow-up"></div> 
       <div class="arrow-down"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

あなたが見ることができるように、クラスと<div>用（上下矢印であること内部がと2つのdivを矢印があります動く）。あなたが想像できる場合

はJavaScript

var MovePerson = { 

    up: function() { 

     $(document).on("click", ".arrow-up", function() { 

      $(this).parents().eq(3).insertBefore($(this).prev()); 

     }); 

    }, 

    down: function() { 

     $(document).on("click", ".arrow-down", function() { 

      $(this).parents().eq(3).insertAfter($(this).next()); 

     }); 

    } 

}; 

$(document).ready(MovePerson.up); 
$(document).ready(MovePerson.down); 

だから、私は行

A 
B 
C 
D 

を持っていると私は2番目の行にCを移動させたいので、順序は、その後A, C, B, Dだろう。

$(this).parents().eq(3)を使用して<row>を選択し、要素の前後に移動するには、もう少しjsを使用します。

（ボーナス）私が最後か初めに達したかどうかを知ることは嬉しいです。だから、おそらく私の目標の前後に別の兄弟がいるかどうかを検出する何らかの方法です。

Answer 1

私は、現在の行を選択し、前/次の行を特定し、現在の行を切り離し、前の行の前または次の行の後に挿入することを考えていると思います。

ここでは、コードスニペットのクイックモードを示します。

var MovePerson = { 

    up: function() { 

     $(document).on("click", ".arrow-up", function() { 

      var thisRow = $(this).parents().eq(3); 
      var prevRow = $(thisRow).prev(); 

      //we only want to move this row up if there is a row before this row. 
      if(prevRow){ 
       $(prevRow).before($(thisRow).detach()); 
      } 
     }); 

    }, 

    down: function() { 

     $(document).on("click", ".arrow-down", function() { 

      var thisRow = $(this).parents().eq(3); 
      var nextRow = $(thisRow).next(); 

      //we only want to move this row down if there is a row after this row. 
      if(nextRow){ 
       $(nextRow).after($(thisRow).detach()); 
      } 
     }); 

    } 

}; 

$(document).ready(MovePerson.up); 
$(document).ready(MovePerson.down);