2016-11-03 3 views
-1

上または下にあるかどうかを確認する - ここに私のマークアップです:関連要素iが、いくつかの要素を持つ順不同リストを持っていると私は周りのアイテムを移動するためのソート可能なのjQueryを使用してい

<ul> 
    <li id=1>item 1</li> 
    <li id=2>item 2</li> 
    <li id=3>item 3</li> 
    <li rel=2>insert</li> 
    <li id=4>item 4</li> 
</ul> 

「挿入」要素私の質問: 関連項目が "挿入"要素の上か下にあるかを判断するためのベストプラクティスは何ですか? (この場合:上記)

+0

私はあなたがjQueryのUIのソート可能なことを意味preusme?コアjqueryはソート可能ではありません – Liam

+0

リストが垂直であると仮定すると、要素のインデックスを比較することができます(下が上を意味します)。代わりに 'offset()。top'を使用して順番の位置を比較できます。代わりに、 'nextAll()'と 'prevAll()'を使うこともできますが、すべての兄弟をループします。 –

+0

基本的には '' $()。prev() 'と' $()。next() '](https: //api.jquery.com/category/traversing/tree-traversal/) – Liam

答えて

1
if($(this).prevAll("[id=2]").length > 0) 
{ 
//element is above 
} 


if($(this).nextAll("[id=2]").length > 0) 
{ 
//element is below 
} 

あなたは、このためのjQueryのnextAllprevAll機能を使用することができます。ここで$(これ)はinsert要素を指します。

0

あなたは要素の場所を取得し、他の要素にそれを比較するためにindex functionを使用することができます。

inserted = $('li[rel=2]'); 
 

 
$('ul li').click(function() { 
 
    if (inserted.index() > $(this).index()) { 
 
    console.log('Clicked element is above'); 
 
    } else if (inserted.index() < $(this).index()) { 
 
    console.log('Clicked element is below'); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id=1>item 1</li> 
 
    <li id=2>item 2</li> 
 
    <li id=3>item 3</li> 
 
    <li rel=2>insert</li> 
 
    <li id=4>item 4</li> 
 
</ul>

関連する問題