how to enable jquery script to support dynamic ids

Question

I have a div popup script which works as intended - see working version here. I wish to use this code within a php loop but it seems the div id is a fixed reference and as such I cannot use this within a loop as the div id can only be referenced one time.

I am looking for a solution to somehow allow the jquery popup script to support dynamic div id's but not sure how to do that.

Here is my html/php code where i can assign a dynamic div id:

$counter is a number, the number increases on every loop i.e. inline-popups1, inline-popups2 etc..

$content = "<!-- Jquery reference -->
<div id='inline-popups".$counter."'>

<!-- Popup link -->
    <a href='#popup".$counter."'>Popup Link</a>
  </div>

<!-- Popup itself -->
<div id='popup".$counter."' class='white-popup mfp-with-anim mfp-hide'>
  <p>content goes here</p>
</div>";

Here is the jquery - as you can see $('#inline-popups') is a fixed referenced. I need it to support the dynamic references as shown above.

// Inline popups
$(document).ready(function() {
    $('#inline-popups').magnificPopup({
      delegate: 'a',
      removalDelay: 500, //delay removal by X to allow out-animation
      callbacks: {
        beforeOpen: function() {
           this.st.mainClass = this.st.el.attr('data-effect');
        }
      },
      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });
});

Why do you need multiple divs? Can't you reuse one div and change the content? — Lance
– Lance, Commented May 30, 2015 at 12:32
the only one that needs to be dynamic is the first div <div id='inline-popups".$counter."'> as thats what is referencing the jquery script.. but how to make the jquery accept that call ? — user3436467
– user3436467, Commented May 30, 2015 at 12:34
I don't believe there is a way to make the id dynamic like that. But like I asked, why can't you just use one div? — Lance
– Lance, Commented May 30, 2015 at 12:38
I tried using one div to cover all iterations of the loop but only the data from the first iteration were click-able, the rest were not. Couldn't understand why they didn't work — user3436467
– user3436467, Commented May 30, 2015 at 12:41
api.jquery.com/attribute-starts-with-selector It works as expected here: codepen.io/anon/pen/oXBpYg — A. Wolff
– A. Wolff, Commented May 30, 2015 at 13:07

A. Wolff · Accepted Answer · 2015-05-30 13:16:31Z

1

You can use startsWith CSS attribute selector as described here:

$("[id^='inline-popups']")

But you should/could use class instead.

answered May 30, 2015 at 13:16

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

how to enable jquery script to support dynamic ids

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related