2016-05-11 6 views
-1

JQuery関数.children()を使用して、ページ内に3つの要素を選択しました。私はそれらの要素を安定して再編成して、順序を保持するようにしたいが、目的の要素は上に上がる。ここでの例である:JQuery、子の再配置

  • B
  • C
  • D

I Cが上部に上昇したい:

Iは要素を有します

  • C
  • D
  • B

私はこのために書かれたコードは、すべての要素が固有のIDを持っていて、サイクリング、または再実行するために、そのターゲットIDを提供することができることを前提としてい要素の-organizing:

function (parent, targetID) { 
     var feedEntries = $(parent).children(".items"); 
     //reorder entries so that the first entry is the top entry 
     while (targetID != feedEntries.first().attr('id')) { 
      feedEntries.first().insertAfter(feedEntries.last()); 
     } 
    } 

私が持っている問題は、それが私のページをクラッシュされ、理論的にはこれは動作するはずにもかかわらずです。この問題を解決するための助けがあれば幸いです。

答えて

1

ループは必要ありません。 .prepend()は、親要素の先頭に要素(または要素の集合)を配置します。 .slice()を使用すると、特定のインデックスからすべての子を取得できます。

$("#button").click(function() { 
 
    move('#list', 'c'); 
 
}); 
 

 
function move(parent, targetID) { 
 
    var index = $("#" + targetID).index(); 
 
    var itemsToMove = $(parent).children().slice(index); 
 
    $(parent).prepend(itemsToMove); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ol id='list'> 
 
    <li id='a'>A</li> 
 
    <li id='b'>B</li> 
 
    <li id='c'>C</li> 
 
    <li id='d'>D</li> 
 
</ol> 
 
<br> 
 
<button id="button">Click to move</button>