How to retrieve a dynamic number of elements by id

Question

I want to know if there is a better way to make these hand coded function calls dynamic?

<div id="sing-mobile-1">.....</div>
<div id="sing-mobile-2">.....</div>

var signCarousel1 = document.getElementById("sing-mobile-1");
var signCarousel2 = document.getElementById("sing-mobile-2");

if (signCarousel1) {
  var initializeSignpostCarousel = sequence(signCarousel1, options);
}
if (signCarousel2) {
  var initializeSignpostCarousel = sequence(signCarousel2, options);
}

There may also be #sign-mobile-3, #sign-mobile-4, etc. It doesn't look clean in this way. Can someone guide me to solve this issue?

Give those element common class name, then it'll be easier to iterate through them. — Walk, Oct 20 '17 at 08:55

score 2 · Answer 1 · answered Oct 20 '17 at 08:55

You can use wildcard ^ to do this

function getElem() {

  // ^ is a wildcard which will pick all elements whose id starts with sing-mobile-1
  $el = $("[id^=sing-mobile-]");
  if ($el.length == 0)
    return false;


  var initializeSignpostCarousel = sequence($el[0], options);
  return initializeSignpostCarousel;
}

score 2 · Accepted Answer · answered Oct 20 '17 at 08:59

2

Instead of getting an indeterminate number of elements by their id, use a single class on them all. You can then loop through all the elements with that class and call your function:

<div class="sing-mobile">...</div>
<div class="sing-mobile">...</div>

document.querySelectorAll('.sing-mobile').forEach(function(el) {
  var initializeSignpostCarousel = sequence(el, options);
  // work with initializeSignpostCarousel here...
});

Or in jQuery:

$('.sing-mobile').each(function() {
  var initializeSignpostCarousel = sequence(this, options);
  // work with initializeSignpostCarousel here...
});

answered Oct 20 '17 at 08:59

Rory McCrossan

331,213
40
305
339

`NodeList.prototype.forEach` is a rather new addition to NodeLists. It's not supported (yet) in Internet Explorer and Edge at all. But NodeLists can be converted to arrays using `Array.prototype.slice.call(nodeList)`. – Andreas Linnert Oct 20 '17 at 09:04
@AndreasLinnert Looks like it should work fine for IE8 and IE9 going by the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll – Master Yoda Oct 20 '17 at 09:09
@MasterYoda Andreas is talking about [nodeList.forEach()](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach), and is correct. It's a good point, and there are [workarounds](https://stackoverflow.com/questions/13433799/why-doesnt-nodelist-have-foreach) - I just yearn for a time we aren't held back by IE :) – Rory McCrossan Oct 20 '17 at 09:10
@RoryMcCrossan Fair enough, apologies for the misunderstanding. – Master Yoda Oct 20 '17 at 09:11
@RoryMcCrossan - This solution works to show the slider element. But, slider auto sliding not working as expected. – TDG Oct 20 '17 at 13:53
I don't know what you mean by 'auto sliding'. Is that logic in your `sequence()` method? I'd suggest starting a new question about it, including the relevant code. – Rory McCrossan Oct 20 '17 at 14:18

score 0 · Answer 3 · answered Oct 20 '17 at 09:26

0

let elements = document.querySelectorAll('[id^=sing-mobile-]');

for (let elem of elements) {
    var initializeSignpostCarousel = sequence(elem, options);
}

answered Oct 20 '17 at 09:26

Hanif

3,739
1
12
18

How to retrieve a dynamic number of elements by id

3 Answers3