Как лучше всего работать с длинными путями?

Question

[lagudal]

Приветствую, есть такой код.

/* move extra menu punkt */
  $('a[title="Title 1"] ~ .ammenu-submenu-container .ammenu-item.-child.-col-4 a[title="Subtitle 1"] ~ ul li:last-child').append($('a[title="Title 1"] ~ .ammenu-submenu-container .ammenu-item__extra'));
  $('a[title="Title 2"] ~ .ammenu-submenu-container .ammenu-item.-child.-col-4 a[title="Subtitle 2"] ~ ul li:last-child').append($('a[title="Title 2"] ~ .ammenu-submenu-container .ammenu-item__extra'));
  $('a[title="Title 3"] ~ .ammenu-submenu-container .ammenu-item.-child.-col-4 a[title="Subtitle 3"] ~ ul li:last-child').append($('a[title="Title 3"] ~ .ammenu-submenu-container .ammenu-item__extra'));

Ну и так далее, дальше может быть еще какое то кол-во таких переносов.
Как видно, пути отличаются только названиями дата-аттрибутов.
Как все это дело лучше всего сократить, лучше всего в одну функцию, подставляя только эти названия аттрибутов?

Comments

[Сергей delphinpro]

Это не пути, а селекторы.
С длинными селекторами не нужно работать. Нужно адаптировать разметку, добавить классы или дата-атрибуты и с ними уже работать в скриптах.

Answer 1

[Сергей Соколов]

Что-то типа такого

const appendByAttr = (title, subtitle) => jQuery(`a[title="${title}"] ~ .ammenu-submenu-container .ammenu-item.-child.-col-4 a[title="${subtitle}"] ~ ul li:last-child`)
  .append($(`a[title="${title}"] ~ .ammenu-submenu-container .ammenu-item__extra`));

appendByAttr('Title 1', 'Subtitle 1');
appendByAttr('Title 2', 'Subtitle 2');
appendByAttr('Title 3', 'Subtitle 3');