CODEWITHSUNDEEP
jqueryjquery-mobile
mrbranden
mrbranden

Reputation: 1050

jQuery Mobile .each() exiting prematurely

I'm attempting to write an app for a tabletop RPG. What I've done is create a list of the players (in a listview) and would like to iterate through each one.

What is supposed to happen: every time it is a player's turn, the player's list element gets highlighted (color change) and a popup appears. The user enters the number of actions taken. Then it will move on to the next player in the list.

What actually happens: the first player on the list gets highlighted, the popup appears, the user submits the # of actions... and then it all stops.

I'm trying to figure out why it's exiting out of .each(). There are no breaks/return false that I can see. I wonder if I'm missing something simple, or perhaps this is a more complicated problem than I thought.

Here's the code for the list view:

<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
         }
    ?>

And here is my 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");
                    }
            }); 
        });

I'm at a loss as to why it only iterates through the first instance of #combatant. In my tests, there are three instances. It always stops after the first.

If anyone has any suggestions, I appreciate it. Thank you in advance!

Upvotes: 0

Views: 48

Answers (1)

Guilherme Sehn
Guilherme Sehn

Reputation: 6787

You shouldn't use the same id for more than one DOM element, this attribute is meant to be an unique identifier. Use the class attribute instead and $('.combatant') to select them.

Upvotes: 2

Related Questions