[jQuery] リストへの項目追加位置の判断

Question

valueの値によりリストへの追加する位置を特定する方法をご教示いただきたく質問しました。

<ul class="sortList1"　id="sortList1">
	<li value="101">あああ</li>
	<li value="102">いいい</li>
	<li value="104">えええ</li>
	<li value="105">おおお</li>
</ul>
<ul class="sortList2" id="sortList2">
	<li value="103">ううう</li>
</ul>

上記のようになっていた時に
下のリストの「<li value="103">ううう</li>」を上のリストに移動させる際に、
valueが降順になるように「<li value="102">いいい</li>」と「<li value="104">えええ</li>」の間に入れたいのですが、

どのように
「<li value="102">いいい</li>の後」あるいは
「<li value="104">えええ</li>の前」を判断するのが適当でしょうか。

ちなみに、移動は対象の項目(<li value="103">ううう</li>)のクリック(ダブルクリック)を想定しています。

以上、ご教示の程お願いいたします。

Answer 1

前提条件にもよると思いますが、書かれているコードのように、
#sortList1がvalue値通りに並んでいて、#sortList2内が１つだけだったらこんな感じでできます。

var listItems = $('#sortList1 li'),
    lastItem = $(listItems[listItems.length - 1]),
    target = $('#sortList2 li'),
    targetValue = $('#sortList2 li').val();

// <li value="103">ううう</li>のvalue値が$('#sortList1 li')最後尾のvalue値より大きければ一番うしろに追加。
// そうでなければ比較処理
(lastItem.val() < targetValue) ? lastItem.after(target) : comparisonInsert(listItems, targetValue);

// <li value="103">ううう</li>のvalue値と$('#sortList1 li')全てのvalue値を比較
// $('#sortList1 li')のvalue値 > <li value="103">ううう</li>のvalue値 となった時、その<li>の前に追加
function comparisonInsert(list, value) {
    list.each(function () {
        if ($(this).val() > value) {
            $(this).before(target);
            return false;
        }
    });
}

#sortList2の<li>が複数あったり、
元のリストがvalue値順で並んでいない場合を考慮するのであれば、次のやり方もできます。

// #sortList1, #sortList2のリストを結合
var target = $.merge($('#sortList1 li'), $('#sortList2 li'));

// value値で全体をソート
var result = target.sort(function (a, b) {
    return ($(a).val() > $(b).val() ? 1 : -1);
});

// #sortList1にソートしたリストを追加
result.each(function(){
    $('#sortList1').append($(this));
});

Comments

[Trainee2019]

初めに最後尾のValueと比較してあげる発想が秀逸です。
私が実現したい内容にとても一致していそうです。
内容をしっかり理解した後作成してみようと思います。
ありがとうございます。

[退会済みユーザー]

ありがとうございます^^

関数の引数部分とコメントに誤りがあったので編集しました。
挙動は変わらないですが、念の為m(__)m

[Trainee2019]

comparisonInsert()内でtargetを使用していたため、引数にtargetも追加したところ、
私のやりたい通りに動作しました。

とても助かりました。ありがとうございました。
確認もできたため、遅くなりましたがベストアンサーとさせていただきます。

Answer 2

判断はすきにしてください

$(function(){
  $('#sortList1 [value=102]').after($('#sortList2 [value=103]'));
});

Comments

[yambejp]

＞ <ul class="sortList1"　id="sortList1">

idの前が全角スペースになっているので直さないと正しく動きません