質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 365

nyamo

score 21

ボタンを押す事で、特定エリア内に連番を入れた要素を追加し、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のソースコード

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

$('.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>' + 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/28 04:44

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

    キャンセル

  • 2019/05/28 11:19

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

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

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

    キャンセル

  • 2019/05/28 11:36

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

    キャンセル

  • 2019/05/28 11:58

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る