Я создаю элементы <li>, как показано ниже, из некоторого ответа JSON. Проблема со следующим созданием состоит в том, что у меня есть фиксированное и такое же количество классов начальной загрузки, определенных для каждого элемента <li>.

Если я хочу добавить class="active" в первый тег <li>, а не в остальные теги, чтобы объявление для первого элемента списка выглядело следующим образом:

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

Возможно ли этого добиться?

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>');
                                   
        }
                        
    }
1
buildingcode543 6 Окт 2021 в 16:03

4 ответа

Лучший ответ

Вы можете упростить его и просто использовать .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");
3
mplungjan 6 Окт 2021 в 13:10

На мой взгляд, лучше использовать Object.keys для преобразования объекта в массив, а затем использовать Array.forEach для выполнения действия над каждым членом.

Это дает вам доступ к индексу преобразуемого элемента. Затем вы можете проверить, равен ли индекс 0, и добавить активный класс к элементу.

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>
1
spirift 6 Окт 2021 в 13:13

Поскольку вы не показали, как выглядят данные json (например, если это массив, вы можете использовать метод map()), решение состоит в том, чтобы создать переменную, содержащую индекс, и увеличивать ее в каждом цикле или хотя бы один раз.

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>');            
        }
                        
 }
1
Fine Boy 6 Окт 2021 в 13:23

Попробуй это;

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;
  }
}
1
Sameera Millavithanachchi 6 Окт 2021 в 13:24