CODEWITHSUNDEEP
javascriptjqueryarrays
CalGregoryy
CalGregoryy

Reputation: 13

JavaScript Storing Ids from an Array

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";
    }
}

Upvotes: 0

Views: 1142

Answers (4)

CertainPerformance
CertainPerformance

Reputation: 370769

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>

Upvotes: 0

Adrian Bindiu
Adrian Bindiu

Reputation: 1

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(', #'));

Upvotes: 0

i100
i100

Reputation: 4666

<!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>

Upvotes: 0

Zenoo
Zenoo

Reputation: 12880

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>

Upvotes: 1

Related Questions