要素追加時の連番処理とjquery ui sortableの組み合わせについて

Question

ボタンを押す事で、特定エリア内に連番を入れた要素を追加し、sortable()で並び替えをしているのですが、sortable()で並び替えをした後にappend()でさらに追加をすると連番処理が強制的に番号順になってしまいます。

単純にappend()後に追加した要素に対してeach()で連番処理を行っている為、強制的に番号順になってしまっているのですが、並び替えた後に追加しても並び替えた番号のまま追加する方法は何かないものでしょうか。

<ul>
<li class="item">
<button class="button"><span class="text">ああああ</span></button>
</li>
<li class="item">
<button class="button"><span class="text">いいいい</span></button>
</li>
<li class="item">
<button class="button"><span class="text">うううう</span></button>
</li>
</ul>

<div class="container">
<ul class="list ui-sortable"></ul>
</div>

        $(document).ready(function () {
            function updateNumber() {
                $('.number_id').each(function (index) {
                    $(this).text(index);
                });
                $('.number_item').each(function (index2) {
                    $(this).attr('data-group', index2);
                });
            }

            $(document).on("click", ".button", function (event) {
                var $layout = $(".list");
                text = $(this).parent().find(".text").text();

                var $header = 
                '<div class="header">' + 
                '<span class="number_id">' + '</span>' + 
                '<span class="memo">' + text + '</span>' + 
                '</div>';

                var $content = 
                '<li class="number_item" data-group="">' + $header + '</li>';

                $layout.append($content);
                updateNumber();
            });
            Draggable();
        });
        function Draggable() {
            $(".list").sortable({
                handle: "div.header",
                axis: 'y'
            });
        }

下記のようにカウントすればできるのは分かっているのですが、今回は諸事情により使えないため他の方法を探しています。

        $(document).ready(function () {
            var count = 1;
            $(document).on("click", ".button", function (event) {
                var $layout = $(".list");
                text = $(this).parent().find(".text").text();

                var $header = 
                '<div class="header">' + 
                '<span class="number_id">' + count + '</span>' + 
                '<span class="memo">' + text + '</span>' + 
                '</div>';

                var $content = 
                '<li class="number_item" data-group="' + count + '">' + $header + '</li>';

                $layout.append($content);
                count++;
            });
            Draggable();
        });

もしわかる方がいらっしゃいましたらお教え頂けると幸いです。
よろしくお願い致します。
jsfiddleのソースコード

Answer 1

属性に持たせていいのならこうかな

$('.number_id').each(function (index) {
    $(this).text(index);
});
'<span class="number_id">' + '</span>' + 
                

↓

$('.number_id').each(function (index) {
    $(this).text($(this).data('number'));
});
'<span class="number_id" data-number="'+$('div').length+'">' + '</span>' + 

Comments

[hentaiman]

カウントしたくないって書いてありましたね

[nyamo]

lengthで要素数を数える方法がありましたね……。

>>カウントしたくないって書いてありましたね
count++をもちいたカウントアップでは要素を削除した場合などに対応できないので使用しませんでした。

$('div.header').lengthで思った通りの動きができました！
ありがとうございます。

[hentaiman]

余計なおせっかいかもしれませんが、要素の番号被ってもいいんですか？
被らないようにしつつ消した空いてる番号の最小値から使いたいなら消した番号保管しておくか毎回ループで使える番号の最小値チェックしなきゃいけません。

[nyamo]

cookieやdbなどが一切使えない状況、また削除した番号は欠番にする開発なので、.empty().hide()で内側を削除→外側非表示で外側の要素数を数えています。
削除した番号は見た目状は欠番になりますので問題はありません。