0

Сервер выдает ссылку, вида

<a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a>

а нужно

<li class="nav-item">
<a href="xxx" class="nav-link ">yyy</a>
</li>
<li class="nav-item">
<a href="xxy" class="nav-link ">yyx</a>
</li>

ссылок примерно 10-15 как сделать подскажите, спасибо!

1
  • Покажите как получаете данные от сервера. Или просто строкой в 2 ссылки?
    – Denis640Kb
    28 мар 2020 в 9:21

2 ответа 2

3

Думаю вам поможет функция .wrap() у jQuery.

$('a')
  .addClass('nav-link') // Добавим класс, как было в примере
  .wrap('<li class="nav-item">'); // Обернём ссылки li.nav-item
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a><a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a>

1
  • кроме етих ссылок есть еще куча( 28 мар 2020 в 10:22
2

let html = "<a href='xxx' class=''>yyy</a><a class='' href='xxy'>yyx</a>";

html = correct(html);
document.body.insertAdjacentHTML('beforeEnd', html);

/***/

function correct(html) {
  let div = document.createElement('div');
  div.innerHTML = html;
  
  div.querySelectorAll('a').forEach(a => {
    a.classList.add('nav-link');
    a.outerHTML = '<li class="nav-item">' + a.outerHTML + '</li>';
  });
  
  return div.innerHTML;
}
.nav-item { color: blue; }
.nav-link { color: red; }

4
  • Неужели проще без jquery не получится?((
    – Leonid
    28 мар 2020 в 9:50
  • @Leonid кажется нет) Всё равно надо делать какой-то перебор, добавить класс, завернуть в li... Можно еще регулярным выражением делать .replace() но регулярки сложнее редактировать спустя время, + в них легко ошибиться с HTML. Встроенные методы браузера надежнее) 28 мар 2020 в 10:05
  • ламает шаблон...думаю из-за div! 28 мар 2020 в 10:21
  • получилось спасибо! 28 мар 2020 в 10:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.