CODEWITHSUNDEEP
javascriptjqueryhtml
Sisi Sajah
Sisi Sajah

Reputation: 231

JQUERY - Building HTML with list variable

how to create Building HTML with list variable...

this my code error...

html

<div class="demo">
  <!-- append code -->
</div>

css

.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}

jQuery code

$(function(){
var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'],
    html = [];
    html = $('<button class="demo_btn_' + cls + '"><span>' + txt + '</span></button>');
  $(".demo").append(html);      
});

and this output my code

<div class="demo">
  <button class="demo_btn_btn1,btn2,btn3">
  <span>button1,button2,button3</span></button>
</div>

And i want this...

<div class="demo">
  <button class="demo_btn_btn1"><span>Button1</span></button>
  <button class="demo_btn_btn2"><span>Button2</span></button>
  <button class="demo_btn_btn3"><span>Button3</span></button>
</div>

Please help me, thank you in advance

Upvotes: 1

Views: 92

Answers (5)

Bla...
Bla...

Reputation: 7288

I would use for loop for this case.

var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'];

for (var i = 0; i < cls.length; i++) {
    $(".demo").append('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>');
}
.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">
  <!-- append code -->
</div>

Upvotes: 0

nav_grl_onrails
nav_grl_onrails

Reputation: 56

Try using a loop, and create new html elements based on the index of cls and txt. Posting from my phone, so apologies if the formatting is messed up.

$(function(){
    var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'];
    for (var i =0; i < cls.length; i++){
       var html = $('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i]+ '</span></button>');
       $(".demo").append(html);      
   }
});

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

You can simply use .each() to loop through array .. and += to html then use .html() after loop

$(function(){
  var html = '';
    cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'];
  $.each(cls , function(i){
    html += '<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>';
  });
  $(".demo").html(html);      
}); 
.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">
  <!-- append code -->
</div>

Upvotes: 0

A. L
A. L

Reputation: 12639

The thing is, you're putting all the content together into a single button, which is why it's showing up as a single element.

You need to loop over the things and assign each element like below.

$(function(){
var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'],
    html = [];
    for (let i = 0; i < 3; i++)
    {
      html = $('<button class="demo_btn_' + cls[i] + '">' + txt[i] + '</button>');
      $(".demo").append(html);
    }
          
});
.demo_btn_btn1 {
   color :red;
}

.demo_btn_btn2 {
   color :blue;
}

.demo_btn_btn3 {
   color :orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">
  
</div>

Upvotes: 1

Zachary Weixelbaum
Zachary Weixelbaum

Reputation: 914

In order to do what you want, you would have to loop through the array one at a time, so what you can do is:

$(function(){
var cls =  ['btn1','btn2','btn3'],
    txt = ['button1','button2','button3'],
    for (var i = 0; i < 3; i++) {
        $(".demo").append(
            $('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>')
        );
    }     
});

Upvotes: 0

Related Questions