Pass string to jQuery selector

Question

I have several classes with the names like so:

.x-string
.y-string
.z-string

A dynamic part and a constant one. I have made an array containing the dynamic parts (x, y, z).

I want to loop through the array, take each name, concatenate "-string" to the end of it, and pass it as a class to be selected in jQuery.

Sort of like:

$(classList).each(function () {
    let newClass = '.' + this + '-string'
    $('.this-string')...
}

Is this possible and how would I go about it? Cheers.

`$(newClass)...` or `$("." + this + "-string")...` there will be numerous duplicates in SO if you'd like to search - but this might be hard to find unless you know the specific things to look for — freedomn-m, Jan 25 '19 at 17:19
assuming `classlist` is an array: `classList.forEach(function (className) { $('.' + className + '-string')... }` should work. — Rafael Herscovici, Jan 25 '19 at 17:20
Maybe https://stackoverflow.com/questions/17097947/jquery-using-a-variable-as-a-selector and its duplicate(s) — freedomn-m, Jan 25 '19 at 17:21
You have two parts to your question - using a variable as a selector and iterating over an array - you are using the wrong `.each` - see http://api.jquery.com/jquery.each/ — freedomn-m, Jan 25 '19 at 17:25

score 1 · Answer 1 · answered Jan 25 '19 at 17:34

JQuery

$.each is used for iteration of the array. Which takes two arguments [index, element].
The element is the element of an array. Don't use this because it's not recommended!

$(classList).each((idx, elem) => {
  $('.'+elem+'-string')
});

Native

To use the native method we'll use the [].forEach or for...of iteration.
NOTE: for...of method has only support from ES6.

// for...of loop
for(i of elem)
  $(`.${elem}-string`)

// forEach loop
elem.forEach(function(elem) {
  $('.'+elem+'-string')
});

Erik Philips · Accepted Answer · 2019-02-04T17:24:09.543

I want to loop through the array,

jQuery works with arrays differently than it works with it's on jQuery object wrapper. So to loop through an array you'd use jQuery.each() or $.each().

var myArray = ['x', 'y', 'z'];
$.each(myArray, function(idxArray, valArray) {
  // code
});

concatenate "-string" to the end of it, and pass it as a class to be selected in jQuery

Now we can use the jQuery selector with .each() to find matching elements

var myArray = ['x', 'y', 'z'];
$.each(myArray, function(idxArray, valArray) {

  var selector = "." + valArray = "-string";
  $(selector).each(function(idxElement, valElement) {
    var $this = $(valElement);
    // or
    var $this = $(this);

    $this.fadeOut();

  });

});

It's important to note that the second .each() should only be used if you have specific logic to run after an item is found. If the code is the same for every element, then each is not needed:

var selector = "." + valArray = "-string";
// fadeOut all matching elements
$(selector).fadeOut();

It's also important to note that if the logic is as simple as your example, you should not need to loop at all. You can create a comma delimited string containing all the selectors.

var myArray = ["a","b","c","d"];

var selector = myArray
  .map(s => "." + s + "-string")
  .join();

  $(selector).css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Black</div>
<div class="a-string">Red</div>
<div>Black</div>
<div class="b-string">Red</div>
<div>Black</div>
<div class="c-string">Red</div>
<div>Black</div>
<div class="d-string">Red</div>

score 0 · Answer 3 · answered Jan 25 '19 at 17:21

0

Some general issues with your usage of .each. Try:

$(classList).each(function(idx, cls) {
    let newClass = '.' + cls + '-string';
    $(newClass) ...
});

answered Jan 25 '19 at 17:21

Sean Murphy

516
4
7

Pass string to jQuery selector

3 Answers3

JQuery

Native