Помогите преобразовать PHP в JS или jQuery

Question

Есть код, который создает элемент button и вставляет его в nav с классом container, есть код на php, помогите преобразовать его в js или jquery.

$let_category = ['Пицца', 'Роллы',  'Сеты', 'Горячие блюда', 'Салаты', 'Бизнес-ланч', 'Супы', 'Закуски', 'Десерты', 'Хлеб', 'Детское меню', 'Напитки', 'Гарниры',];
$let_slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads', 'business-lunch', 'soups', 'snacks', 'desserts', 'bread', 'child-menu', 'drinks', 'garnishes',];

echo count($let_category) . ' ' . count($let_slug_id);

$nav = '<nav class="container">';
for ($i = 0; $i < count($let_category); $i++) {
    $nav .= "<button class=\"btn-menu ripple-btn\" category=\"{$let_slug_id[$i]}\">{$let_category[$i]}</button>" . PHP_EOL;
}

$nav .= '</nav>';

echo $nav;

Answer 1

let category = ['Пицца', 'Роллы',  'Сеты', 'Горячие блюда', 'Салаты', 'Бизнес-ланч', 'Супы', 'Закуски', 'Десерты', 'Хлеб', 'Детское меню', 'Напитки', 'Гарниры'];
let slug = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads', 'business-lunch', 'soups', 'snacks', 'desserts', 'bread', 'child-menu', 'drinks', 'garnishes'];

let lenDiv = document.createElement("div");
lenDiv.innerHTML = category.length+' '+slug.length;
document.body.append(lenDiv);

let nav = '<nav class="container">';
for ($i = 0; $i < category.length; $i++) {
    nav += "<button class=\"btn-menu ripple-btn\" category=\""+slug[$i]+"\">"+category[$i]+"</button>";
}
nav += '</nav>';

let navDiv = document.createElement("div");
navDiv.innerHTML = nav;
document.body.append(navDiv);

Answer 2

Так же можно через литералы

let category = ['Пицца', 'Роллы',  'Сеты', 'Горячие блюда', 'Салаты', 'Бизнес-ланч', 'Супы', 'Закуски', 'Десерты', 'Хлеб', 'Детское меню', 'Напитки', 'Гарниры'];
  let slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads', 'business-lunch', 'soups', 'snacks', 'desserts', 'bread', 'child-menu', 'drinks', 'garnishes'];

  document.write(`<p>${category.length} ${slug_id.length}</p>`);

  let nav = '<nav class="container">';

  for (let i = 0; i < category.length; i ++) {
    nav += `<button class="btn-menu ripple-btn" category = "${slug_id[i]}">${category[i]}</button>`;
  }

  nav += '</nav';

  document.write(nav);

Answer 3

Вариант на jQuery

let category = [
      'Пицца', 'Роллы', 'Сеты',
      'Горячие блюда', 'Салаты', 'Бизнес-ланч',
      'Супы', 'Закуски', 'Десерты',
      'Хлеб', 'Детское меню', 'Напитки',
      'Гарниры'
    ],
    slug_id = [
      'pizza', 'rolls', 'sets',
      'hot-dish', 'salads', 'business-lunch',
      'soups', 'snacks', 'desserts',
      'bread', 'child-menu', 'drinks',
      'garnishes'
    ],
    nav = $('<nav class="container"></nav>');

for(let i = 0; i < category.length; i++) {
  nav.append('<button class="btn-menu ripple-btn" category="'+slug_id[i]+'">'+category[i]+'</button>');
}

$('body').html(nav);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Помогите преобразовать PHP в JS или jQuery

Ответы (3 шт):