How to iterate over an array of strings to generate class selectors

Question

I have a long array of strings like "authorA", "authorB", "authorC". I am trying to iterate over that array to use it as a css class selector.

However, it does not work. I have tried all sorts of combinations, but I cannot get jquery to understand the string as a class. What am I doing wrong? Below is my latest attempt.

   (selected_authors_array).forEach(function (item, index) {

       $('#card-content > ('.' + item)').show();

    });

This is the entire code:

                var script = document.createElement("script");
                script.innerHTML = `
                    $('[id="filtro-${artigo.author.name}"]').change(function() {

                        show_content('#conteudo-reports', 'Relatórios');
                        $("#nav-tab").fadeIn();
                        $("#pagination").fadeIn(); //pagination
                        $("#nav-share").fadeOut(); //back button       

                        if(this.checked){
                            filtered_authors_set.add('.${(artigo.author.name).split(' ').join('')}'); 
                        }
                        else {
                            filtered_authors_set.delete('.${(artigo.author.name).split(' ').join('')}');                              
                        }

                        if(filtered_authors_set.size == 0){
                            $('#card-content > *').show();
                            $('#grid-content > *').show();
                            $('#list-content > *').show();                                 
                        }
                        else {                           
                            $('#card-content > *').hide();
                            $('#grid-content > *').hide();
                            $('#list-content > *').hide(); 
                            
                            selected_authors_array = Array.from(filtered_authors_set);

                            (selected_authors_array).forEach(function (item, index) {
                                console.log(item);
                                
                                $('#card-content > item').show();
                                $('#grid-content > item').show();
                                $('#list-content > item').show();
                            });

                        }
                                                   
                    });
                    `;
                document.head.appendChild(script);

Answer 1

You can try this

const selected_authors_array = ["authorA", "authorB", "authorC"];
const selectors = [];

// create an array of selectors
selected_authors_array.forEach(function(item, index) {
  selectors.push("." + item);
});

$("#card-content")
  .find(selectors.join(', ')) // join them to form a list of selectors
  .show();

.authorA,
.authorB,
.authorC {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="card-content">
  <div class="authorA">Author A (should show)</div>
  <div class="authorB">Author B (should show)</div>
  <div class="authorC">Author C (should show)</div>
</div>

<div class="authorA">Author A (should hide)</div>
<div class="authorB">Author B (should hide)</div>
<div class="authorC">Author C (should hide)</div>

Answer 2

The way you have structured your selector is a string #card-content > (, a dot and a second string + item) You can do it much easier with template literals

$(`#card-content > .${item}`).show();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals