Как сгенерировать список UL Li из массива строк с помощью jquery?

У меня есть массив строк, например

«США», «Канада», «Аргентина», «Армения», «Аруба», «Австралия», «Австрия», «Азербайджан», «Багамы», «Бангладеш», «Беларусь», «Бельгия»** , ... так далее.

Я хочу создать динамический список из массива строк, как показано ниже: -

<ul class="mylist" style="z-index: 1; top: 474px; left: 228px; display: none; width: 324px;" > 
  <li class="ui-menu-item" role="menuitem">
     <a class="ui-all" tabindex="-1">
         United States
    </a>
  </li>
  <li class="ui-menu-item" role="menuitem">
     <a class="ui-all" tabindex="-1">
         Canada
    </a>
  </li>
  <li> .... </li>
   .....
</ul>

Как это возможно с помощью jQuery?


person Abhishek B.    schedule 04.05.2011    source источник


Ответы (6)


С ES6 вы можете написать это:

const countries = ['United States', 'Canada', 'Argentina', 'Armenia'];

const $ul = $('<ul>', { class: "mylist" }).append(
  countries.map(country => 
    $("<li>").append($("<a>").text(country))
  )
);
person tokland    schedule 17.12.2015
comment
вы предлагаете также работает. спасибо за результат вкратце. как добавить новый класс mylist в список UL - person Abhishek B.; 22.12.2015

Еще лучший подход с использованием метода join массива.

var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
var list = '<ul class="myList"><li class="ui-menu-item" role="menuitem"><a class="ui-all" tabindex="-1">' + countries.join('</a></li><li>') + '</li></ul>';
person SM Farhad Ali    schedule 15.03.2015
comment
если под лучше ты подразумеваешь короче, то да лучше. но не так просто для понимания. - person Zaffer; 22.06.2021

Другой вариант Abhishek Bhalani: вы можете использовать Array.map() вместо $.each()

var items = ['United States', 'Canada', 'Argentina', 'Armenia'];
var cList = $('ul.mylist');
items.map( (item,i ) => {
      var li = $('<li/>')
        .addClass('ui-menu-item')
        .attr('role', 'menuitem')
        .appendTo(cList);
      $('<a class="ui-all">'+ i + ': ' + item.name + '<a/>')
        .appendTo(li);
    });
person Pavlo Oliinyk    schedule 27.04.2016

Это возможно и без jQuery! :)

let countries = ['United States', 'Canada', 'Argentina', 'Armenia', 'Aruba'];

// The <ul> that we will add <li> elements to:
let myList = document.querySelector('ul.mylist');

// Loop over the Array of country names:
countries.forEach(function(value, index, array) {
  // Create an <li> element:
  let li = document.createElement('li');

  // Give it the desired classes & attributes:
  li.classList.add('ui-menu-item');
  li.setAttribute('role', 'menuitem');

  // Now create an <a> element:
  let a = document.createElement('a');

  // Give it the desired classes & attributes:
  a.classList.add('ui-all');
  a.tabIndex = -1;
  a.innerText = value; //  <--- the country name from our Array
  a.href = "#"

  // Now add the <a> to the <li>, and add the <li> to the <ul>
  li.appendChild(a);
  myList.appendChild(li);
});
<ul class="mylist"></ul>

person Josh Withee    schedule 24.06.2019

person    schedule
comment
Какая разница здесь с использованием vanilla js .forEach() ? - person Zaffer; 22.06.2021

person    schedule
comment
Спасибо, я получаю сообщение об ошибке a is undefined в jquery javascript, я использую jquery 1.5.1. Как это исправить? - person Abhishek B.; 04.05.2011
comment
Переключитесь на версию jQuery для разработки. Это покажет вам, где он терпит неудачу. - person Mike Thomsen; 04.05.2011