在可排序的AJAX成功调用之后循环遍历类

时间:2015-04-27 21:38:55

标签: jquery jquery-ui-sortable

我有一个sortable电话,它允许我通过拖动它们来改变我列出的歌曲的顺序,这是工作部分。我想要做的是尝试在每个标题前面输入一个数字,以便用户知道哪首歌是第一首,依此类推,使用像1.这样的标签

我将代码放在AJAX的success回调中,基本上只更新了query并更改了DB中的顺序,这也很正常。

我无法工作的是AJAX中.each回调中的循环success。它似乎不想触发甚至找到类.song-orders

我已经展示了它之前的样子以及我想要的样子。

JQUERY

$('.draggablePanelList').sortable({
    update: function(event, ui) {
        var wafilesid = $(this).find('.wafilesid').attr('id');
        var grouptype = [];
        $(this).find('.sortableid').each(function() {
            grouptype.push($(this).attr('id'));
        });
        $.ajax({
            type: "POST",
            url: "../includes/updatesetlists.php?",
            data:({grouptype: grouptype, wafilesid: wafilesid}),
            success: function(data) {
                count = 1;
                $(this).find('.song-orders').each(function() {
                    $(this).('.song-orders').prepend(count+'. ');
                    count++;
                });
            }
        });
    }
});

HTML之前

<ul class="list-unstyled draggablePanelList" style="overflow:auto;">
    <div class="song-orders">Title Of Song 1</div>
    <div class="song-orders">Title Of Song 2</div>
    <div class="song-orders">Title Of Song 3</div>
    <div class="song-orders">Title Of Song 4</div>
    <div class="song-orders">Title Of Song 5</div>
</ul>

HTML AFTER

<ul class="list-unstyled draggablePanelList" style="overflow:auto;">
    <div class="song-orders">1. Title Of Song 1</div>
    <div class="song-orders">2. Title Of Song 2</div>
    <div class="song-orders">3. Title Of Song 3</div>
    <div class="song-orders">4. Title Of Song 4</div>
    <div class="song-orders">5. Title Of Song 5</div>
</ul>

0 个答案:

没有答案