CODEWITHSUNDEEP
javascriptjquery
user16776772
user16776772

Reputation:

Adding class to first dynamically created li tag

I am creating <li> elements as shown below from some JSON response. The problem with the following creation is that I have fixed and same number of bootstrap classes defined for each <li> element.

If I want to add the class="active" in the first <li> tag and not in the remaining tags so that the declaration would look like the following for the first list element :

<li role="presentation" class = "active" >.

Is it possible to achieve this?

for (var key in jsonData) {
           if (jsonData.hasOwnProperty(key)) {
             console.log(key + " -> " + jsonData[key].textName);
                
    $('#tabs').append('<li role="presentation" ><a data-toggle="tab" id="tab_'+jsonData[key].textName+'" href="#panel_'+jsonData[key].textName+'">'+jsonData[key].textName+'<span id="count_'+jsonData[key].textName+'" class="countLabel"></span></a></li>');
                                   
        }
                        
    }

Upvotes: 0

Views: 144

Answers (4)

SaminatorM
SaminatorM

Reputation: 630

Try this;

let isFirstRun = true, container = $('#tabs'); //cache container for better performance
for (var key in jsonData) {
  if (jsonData.hasOwnProperty(key)) {
    container.append('<li role="presentation" ' + (isFirstRun ? 'class="active" : ""') + ' ><a data-toggle="tab" id="tab_' + jsonData[key].textName +
      '" href="#panel_' + jsonData[key].textName + '">' + jsonData[key].textName + '<span id="count_' + jsonData[
        key].textName + '" class="countLabel"></span></a></li>');
    isFirstRun = false;
  }
}

Upvotes: 0

Newton Karani
Newton Karani

Reputation: 359

Since you did not show what the json data looks like (e.g if its an array you could use map() method), The solution is to create a variable that holds the index and increment it on each loop or at least once.

var index = 0;    
for (var key in jsonData) {
   if (jsonData.hasOwnProperty(key)) {
        console.log(key + " -> " + jsonData[key].textName);
       if(index == 0){         
    $('#tabs').append('<li role="presentation" class="active">');
    index = 3;
          }else{
    $('#tabs').append('<li role = "presentation">');
      }            
    $('tabs').append('<a data-toggle="tab" id="tab_'+jsonData[key].textName+'" href="#panel_'+jsonData[key].textName+'">'+jsonData[key].textName+'<span id="count_'+jsonData[key].textName+'" class="countLabel"></span></a></li>');            
        }
                        
 }

Upvotes: 0

spirift
spirift

Reputation: 3062

In my opinion it's better to use Object.keys to transform the object into an array and then use Array.forEach to perform an action on each member.

This has the advantage of giving you access to the index of the item being transformed. You can then check if the index is 0 and add the active class to the element.

const jsonData = {
  foo: {
    textName: 'foo'
  },
  bar: {
    textName: 'bar'
  }
}

Object.keys(jsonData).forEach((key, index) => {
  $('#tabs').append(`<li role="presentation" class="${index === 0 ? 'active' : ''}">${jsonData[key].textName}</li>`);
})
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs"></ul>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177786

You could simplify it and just use .first()

$('#tabs').html(
  Object.entries(jsonData).map(([key,value]) => `<li role="presentation">
    <a data-toggle="tab" id="tab_${value.textName}" href="#panel_${value.textName}">${value.textName}<span id="count_${value.textName}" class="countLabel"></span></a>
  </li>`).join("")
).first().addClass("active");

Upvotes: 1

Related Questions