Adding class to first dynamically created li tag-CodePudding

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>');
                                   
        }
                        
    }

CodePudding user response：

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");

CodePudding user response：

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>

CodePudding user response：

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>');            
        }
                        
 }

CodePudding user response：

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;
  }
}