I want to add array element in class selector

Question

I want to add array element in class selector, I have attached image the result is , I want div separated like this

$(document).ready(function () {
   
   var arr = ['top', 'right', "Bottom", "left"]
   var direction = "";
   $.each(arr, function (index, value) {
       direction += value
   });
   $("#directionSec").html("<div class='directionMain'><span class='directionHeader'><h5>Header</h5>" + "<div id='result' class=" + direction + ">" + direction + "</div>" + "</span>");
})

enter image description here

The result I am getting

 <div class="toprightbottomleft"> toprightBottomleft</div>

The result I wanted

<div class="top">top</div> 
<div class="bottom"> bottom</div>

hi @aloisdg, I got the result but I am trying add a class in div as a element but its showing as topBottomrightleft I wanted it separately written in <div> — user10955924
– user10955924, Commented Nov 10, 2021 at 19:50
@radrocker Please read here: stackoverflow.com/help/minimal-reproducible-example — bitski
– bitski, Commented Nov 10, 2021 at 19:52
You mean "top right Bottom left" with spaces between the values? — chazsolo
– chazsolo, Commented Nov 10, 2021 at 20:02
hi @chazsolo, no the result is <div class="toprightbottomleft" /> i want the result div to be separated <div class="top"> <div class="right"> — user10955924
– user10955924, Commented Nov 10, 2021 at 20:07

j08691 · Accepted Answer · 2021-11-10 20:25:07Z

1

You can append them this way:

var arr = ['top', 'right', "Bottom", "left"]
arr.forEach(element => {
  $('#result').append(`<div class="${element}">${element}</div>`)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result"></div>

On a side note, you have "<div id='result' class=" + direction + ">" in your example, however I'm not sure what you want to appear in the class there.

If you want a list of the array items listed as classes in the result div, like <div id="result" class="top right Bottom left">, then change the append in my above example to

$('#result').append(`<div class="${element}">${element}</div>`).addClass(element)

answered Nov 10, 2021 at 20:25

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bitski · Accepted Answer · 2021-11-10 20:51:31Z

0

This will create a string 'innerHtml' containing information about those 4 different divs with the appropriate array arr values as their class names and their text content.

Afterwards that string will be set as HTML content of #directionSec:

$(document).ready(function () {   
   var arr = ['top', 'right', "Bottom", "left"],
   innerHtml = '';
   $.each(arr, function( index, value ) {
     innerHtml += "<div class=' + value + '>' + value + '</div>"; 
   });
   $('#directionSec').html(innerHtml);
})

edited Nov 10, 2021 at 20:51

answered Nov 10, 2021 at 20:27

Collectives™ on Stack Overflow

I want to add array element in class selector

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related