JavaScript Storing Ids from an Array

Question

I'm trying to grab all the ids which have a common class name and storing them as an array using the following code (this works correctly):

var ids = $('.idSelect').map(function() {
  return $(this).attr('id');
}).get();

However, I then want to define 'btn' to multiple ids, so that any id can trigger the rest of my JavaScript, however it doesn't seem to be working with the following code snippet.

var btn = '#' + ids.join(', #');

From the chrome console, it seems to me that it is acting as one big string.

Edit:

The rest of the code -

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var ids = $('.idSelect').map(function() {
  return $(this).attr('id');
}).get();

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
       modal.style.display = "none";
    }
}

so that any id can trigger the rest of my JavaScript How? Are you trying to add click listeners to them, or something? Can you post that code so we have a clearer idea of what you're trying to accomplish? — CertainPerformance
– CertainPerformance, Commented Jun 26, 2018 at 9:11

Zenoo · Accepted Answer · 2018-06-26 09:15:12Z

You could try mapping the DOM elements with jQuery .get() method :

let btn = '#' + $('.idSelect').get().map(e => e.id).join(', #');

Demo:

let btn = '#' + $('.idSelect').get().map(e => e.id).join(', #');
console.log(btn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idSelect" id="test1"></div>
<div class="idSelect" id="test2"></div>
<div class="idSelect" id="test3"></div>

Or you could use Array#reduce and String#slice the last , instead :

let btn = $('.idSelect').get().reduce((acc, curr) => acc += '#' + curr.id + ',', '').slice(0,-1);

Demo:

let btn = $('.idSelect').get().reduce((acc, curr) => acc += '#' + curr.id + ',', '').slice(0,-1);
console.log(btn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idSelect" id="test1"></div>
<div class="idSelect" id="test2"></div>
<div class="idSelect" id="test3"></div>

i100 · Accepted Answer · 2018-06-26 09:20:48Z

0

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <div class="idSelect" id="test1">test1</div>
    <div class="idSelect" id="test2">test2</div>
    <div class="idSelect" id="test3">test3</div>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
      var ids = [];
      $('.idSelect').each(function(i, el) {
        if (el.id == '') {
          return;
        }
        ids.push('#' + el.id);
      });
      console.log(ids.join(','));

      $(ids.join(',')).on('click', function(e) {
        console.log('clicked');
      })

    </script>

  </body>

</html>

answered Jun 26, 2018 at 9:20

i100

4,6661 gold badge26 silver badges21 bronze badges

Comments

Adrian Bindiu · Accepted Answer · 2018-06-26 09:25:04Z

0

The btn variable will always be a long string unless you wrap it inside the jQuery wrapper with $(yourSelectorHere). If you wrap that long string, it will give you an array of all the elements you wanted and will be accessible for your JavaScript code as html elements.

var ids = [];

$('.idSelect').map(function() {
    ids.push($(this).attr('id'));
})

var btn = $('#' + ids.join(', #'));

answered Jun 26, 2018 at 9:25

Adrian Bindiu

1

Comments

CertainPerformance · Accepted Answer · 2018-06-26 09:25:32Z

0

If you want to be able to use the big selector string of IDs - which is usable, even if it's not the greatest idea - you should probably use event delegation, like this:

const ids = [...document.querySelectorAll('.idSelect')].map(({ id }) => id);
const selectorString = '#' + ids.join(', #');
document.body.addEventListener('click', (e) => {
  if (e.target.closest(selectorString)) console.log('click');
});

<div class="idSelect" id="a">a (will trigger)</div>
<div class="idSelect" id="b">b (will trigger)</div>
<div class="idSelect" id="c">c (will trigger)</div>
<div id="d">d (won't trigger listener)</div>

answered Jun 26, 2018 at 9:25

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

JavaScript Storing Ids from an Array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related