jQuery Mobile .each()提前退出

时间:2013-10-25 23:39:48

标签: jquery jquery-mobile

我正在尝试为桌面RPG编写应用程序。我所做的是创建一个玩家列表(在列表视图中),并希望迭代每个玩家。

应该发生什么:每当玩家轮到玩家时,玩家的列表元素会突出显示(颜色变化)并出现一个弹出窗口。用户输入所采取的操作数。然后它将移动到列表中的下一个玩家。

实际发生的事情:列表中的第一个玩家突出显示,弹出窗口显示,用户提交动作数量......然后全部停止。

我正在试图找出它为什么退出.each()。我可以看到没有中断/返回false。我想知道我是否遗漏了一些简单的东西,或者这可能是一个比我想象的更复杂的问题。

以下是列表视图的代码:

<ul id="combat_list" data-role="listview" data-inset="true" data-theme="a" data-count-theme="a">
    <li data-role="list-divider">Combat Round: <?php echo $round; ?><span class="combat_result"></span></li>
    <?php
        for ($i = 0; $i < $numrows; $i++) {
    ?>
            <li id="combatant"><h3 class="ui-li-heading"><span class="player_name"><?php echo $member[$i]['player_name']; ?></span></h3><span class='ui-li-count'><?php echo $member[$i]['player_total_init']; ?></span>
                <p class="ul-li-desc"><strong>Actions Remaining: </strong><span class="remaining"><?php echo $member[$i]['player_actions_remain']; ?></span></p>
            </li>
    <?php
         }
    ?>

这是我的jQuery:

        $('#combatant').each(function(index, value) {
            $(this).attr('data-theme', 'b');
            $('#combat_list').listview("refresh");
            $(this).buttonMarkup();
            var actions_remaining = $(this).find('.remaining').text();
            var combatant_name = $(this).find('.player_name').text();
            var combat_id = '<?php echo $combatid; ?>';             
            $("#data_holder").data({"curr_actions_remaining" : actions_remaining});

            $("#enter_num_actions").popup({
                    beforeposition: function( event, ui ) {
                        $("#data_holder").data({"combatant_name": combatant_name, "combat_id": combat_id});
                    },
                    afterclose: function( event, ui ) {
                        $('#combat_list').listview("refresh");
                    }
            }); 
        });

我不知道为什么它只遍历#combatant的第一个实例。在我的测试中,有三个实例。它总是在第一个之后停止。

如果有人有任何建议,我很感激。提前谢谢!

1 个答案:

答案 0 :(得分:2)

您不应对多个DOM元素使用相同的id,此属性应为唯一标识符。请改为使用class属性和$('.combatant')选择它们。