Use dynamic div IDs with jQuery

Question

I have a container which is filled with max. 20 items, each item gets its information (such as image) from an SQL database and an own div with id suit_(1-20).

The items get listed in the code below:

<?php 
    $d = 1;
?>
<table >
    <tbody>
    <?php while $item = sqlsrv_fetch_object($user_item) : ?>
        <td align="center" height="50" width="21%">
            <div class="tooltips" href="">
                <div class="suitable" id="suit_<?php echo $d++ ?>" name="<?php echo $myDBID ?>">
                    <img src="images/icon/<?php echo $item->Img ?>">
                </div>
            </div>
        </td>   
    <?php endwhile; ?>  
    </tbody>
</table>

As you see each div has the id suit_(d++) which means 1-20 for max 20 items. Those divs have a jQuery script to trigger a contextual menu event on right click:

$(function () {
    var count;
    for(count = 1; count < 21; count++) {
        var ID = document.getElementById('suit_' + count).getAttribute('id');
        $('#suit_' + count).contextPopup({
            items : [{
                label : 'Set',
                action : function () {
                    window.location.href = "?settest=" + ID
                }
            },
            null, 
            {
                label : 'Throw',
                action : function () {
                    window.location.href = "?throwtest=" + ID
                }
            },
            ]
        });
    }
});

I have a for-loop which should count from 1 to 20 and generate the appropriate ids (suit_1 to suit_20).

Somehow the script works only for the last item in the container, so if I have 10 items in it, all items will get the ID suit_10.

Any ideas?

random_user_name · Accepted Answer · 2016-01-26 18:04:42Z

1

Why not remove the loop, and use an starts with attribute selector?

Using the ^= selector says "anything that starts with":

// A bit "safer" document ready, won't collide with other libraries that use $
jQuery(function($) {
    // Select all items with ID starting with "suit_"
    $('[id^="suit_"]').contextPopup({
        items : [{
            label : 'Set',
            action : function () {
                window.location.href = "?settest=" + $(this).attr('id');
            }
        },
        null, 
        {
            label : 'Throw',
            action : function () {
                window.location.href = "?throwtest=" + $(this).attr('id');
            }
        },
        ]
    });
});

edited Jan 26, 2016 at 18:04

answered Jan 26, 2016 at 17:32

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

eastclintwood Over a year ago

This is actually pretty nice and will be helpful in the further project, sadly the entire dropdown stops working if i use this selector. I also tried $( div'[id^="suit_"]') like mentioned on the site you just refered to, the problem still remains.

eastclintwood Over a year ago

I noticed now the selector works like a charm, the actual problem is the "var ID = $(this).attr('id');" inside the event handler. If i remove it the dropdown works fine, but outside i have the same problem like before.

random_user_name Over a year ago

Ah, I see the issue. Standby.

eastclintwood Over a year ago

Thanks for hanging on. Sadly i went through this issue already a few times today. I changed my code with your edits and at least the dropdown works again, but somehow the actual div container ID is not recognized, as i get "?settest=undefined" onclick on the menu button. Also $(event.target) shows the same result.

random_user_name Over a year ago

Hm. It may seem that the contextPopup function is taking control of the "this" - without diving into that code, this becomes more complicated. My solution may not work, it may be that you need your loop afterall (which is lame, I think). Question - in your own code, why not make the var ID call like this: var ID = 'suit_' + count; ? That may help?

|

eastclintwood · Accepted Answer · 2016-01-26 20:19:44Z

I solved the issue by adding an each(function()) for the selector and setting a variable object before the event starts.

The problem with the previous solution was the child function

action : function () {
   window.location.href = "?settest=" + ID
}

which caused that $(this)was not working.

See the full code below:

jQuery(function($) {
    $('[id^="suit_"]').each(function(){
    var object = this;
    $(object).contextPopup({
        items : [{
            label : 'Set',
            action : function () {
                window.location.href = "?settest=" + object.id
            }
        },
        null, 
        {
            label : 'Throw',
            action : function () {
                window.location.href = "?throwtest=" + object.id
            }
        },
        ]
    });
    });
});

Collectives™ on Stack Overflow

Use dynamic div IDs with jQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related