1

Есть задача из разных ссылок сделать форматирование чтоб можно было с помощью css сделать так чтоб они были по порядку пример

движок формирует такого вида блок

<ul>
<a class="Tooltip" href="threads/audi-tt-kuzov-mk1.6/"></a>
<a class="Tooltip" href="threads/audi-tt-tuning-mk1.10/"></a>
<a class="Tooltip" href="threads/audi-tt-zvik-mk1.4/"></a>
<a class="Tooltip" href="threads/audi-tt-electronika-mk1.18/"></a>
<a class="Tooltip" href="threads/audi-tt-dvizhok-mk1.25/"></a>
<a class="Tooltip" href="threads/audi-tt-sets-mk1.1/"></a>
</ul>

и на каждой странице динамически меняется их положение но слова kuzov , dvizhok и тд всегда фигурируют возможно ли как прогонять этот список постоянно и по фразам в ссылке присваивать класс например:

<ul>
<a class="kuzov" href="threads/audi-tt-kuzov-mk1.6/"></a>
<a class="tuning" href="threads/audi-tt-tuning-mk1.10/"></a>
<a class="zvik" href="threads/audi-tt-zvik-mk1.4/"></a>
<a class="electrika" href="threads/audi-tt-electronika-mk1.18/"></a>
<a class="dvizhok" href="threads/audi-tt-dvizhok-mk1.25/"></a>
<a class="sets" href="threads/audi-tt-sets-mk1.1/"></a>
</ul>

и так далее

Я не совсем разбираюсь в javascript

Пытался по образцу но не получается именно фразу найти

window.onload = function() {
const template = ( link, title ) => `<li class="link-list-item"><a href="${ link }">${ title }</a></li>`;

let messages = document.body.querySelectorAll( '.Tooltip' );

let html = Array.from( messages ).reduce( (result, element) => {
  let text = element.innerText;
  let titles = text.match( /dvizhok/g );


  if( titles ){
    let link = element.querySelector('.Tooltip').href;

    return result += template( link, titles[1] ) + '\n';
  }

  return result;
}, "" );


let linkList = document.body.querySelector('.link-list');
linkList.innerHTML = html;}

но это скорей всего не в ту степь потому что нужно оставлять на месте просто добавлять класс , и еще не понимаю как с кешированием это все сделать чтоб человек не видел что это происходит пока страница грузится

2 ответа 2

0

Можно использовать в CSS селекторы по аттрибутам вместо классов.

a[href*=engine] {
  color: green;
}
<a href="/link-to-engine-of-audi">Engine Link</a>


Или использовать их же, для поиска нужных ссылок:

var keywords = ['dvizhok', 'kuzov', 'tuning', 'zvik', 'electrika'];
keywords.forEach(word => {
  document.querySelectorAll('a[href*='+word+']')
    .forEach(el => el.classList.add(word));
})
.kuzov{color: red;}
.tuning{color: green;}
.zvik{color: yellow;}
.electrika{color: black;}
<ul>
<li><a href="threads/audi-tt-kuzov-mk1.6/">1</a>
<li><a href="threads/audi-tt-tuning-mk1.10/">2</a>
<li><a href="threads/toyota-super-zvik-/">3</a>
<li><a href="threads/mers-tt-electrika-mk1.18/">4</a>
</ul>

5
  • Предлагаете создать N селекторов по аттрибутам? Жестоко Вы :)
    – user207618
    1 мар 2017 в 18:02
  • Ну n классов, вы же для чего-то создаёте? Я предлагаю использовать их вместо классов
    – vp_arth
    1 мар 2017 в 18:03
  • Аттрибуты тяжелее на порядок, нежели классы.
    – user207618
    1 мар 2017 в 18:06
  • Дописал js решение на тех же селекторах
    – vp_arth
    1 мар 2017 в 18:11
  • 1
    Думал многое знаю о css но что такие вещи можно творить реально круто , мне подходит потому что у меня максимум будет 10 классов это просто для форума и css он быстрее от рисуется и не будет заметно что манипуляции какие то производятся со ссылками . Спасибо огромное )
    – titan_ime
    1 мар 2017 в 18:15
0

Array.from(document.querySelectorAll('#target a')).forEach(a => {
  if(a.href.includes('threads/')){
    a.classList.add(a.href.match(/[a-z]+-[a-z]+-([a-z]+)/i)[1]);
  }
});
<ul id='target'>
  <li>
    <a class="Tooltip" href="threads/audi-tt-kuzov-mk1.6/"></a>
    <a class="Tooltip" href="threads/audi-tt-tuning-mk1.10/"></a>
    <a class="Tooltip" href="threads/audi-tt-zvik-mk1.4/"></a>
    <a class="Tooltip" href="threads/audi-tt-electronika-mk1.18/"></a>
    <a class="Tooltip" href="threads/audi-tt-dvizhok-mk1.25/"></a>
    <a class="Tooltip" href="threads/audi-tt-sets-mk1.1/"></a>
    <a class="Tooltip" href="threads/daewooi-nexia-kuzov.50/"></a>
  </li>
</ul>

4
  • тут просто все будет меняться в ссылках кроме этих фраз нужно именно при нахождении фразы в ссылке чтоб добавлял тот класс который нужно добавить при нахождении такой то фразы
    – titan_ime
    1 мар 2017 в 18:04
  • Ничего не понял. Напишите понятнее. Вроде похоже на Ваш пример работы.
    – user207618
    1 мар 2017 в 18:08
  • Просто здесь как понимаю обработка цепляется за audi-tt- а в форуме там будут меняться сами фразы daewooi-nexia-kuzov.50/ и тд
    – titan_ime
    1 мар 2017 в 18:19
  • @titan_ime, вот как... Привели бы хоть один пример в шапке. ОК, сейчас поправим.
    – user207618
    1 мар 2017 в 18:23

Ваш ответ

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

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