Как изменить html при помощи jquery?

Question

[UthvfyV]

Есть 2 списка ul. Каждому ul li задан класс индексом. Т.е. классы li1 li2 и т.д., во 2 ul кдассы начинаются не допустим с li10, а снова li1 li2. В каждом li есть span с классом title. Как можно передать содержимое каждого li .title первого ul, соответственно li с тем же классом во второй ul?

Я делаю так. На jquery.

<div class="ul">
<ul class="ul1"><li class="li1"><span class="title">span1</span></li><li class="li2"><span class="title">span2</span></li></ul>   

<ul class="ul2"><li class="li1"><span class="title">span3</span></li><li class="li2"><span class="title">span4</span></li></ul></div>

Теперь надо заменить к примеру span1 на span3. Получить то я получаю.

$('ul').each(function(){
var a = $(this).find('.ul1 .li1 .title').html();
$(this).find('.ul2 .li1 .title').html(a)})

Но у меня не 2 li, и не 3. А около 300. Если я так сделаю то содержимое всех li в ul2 заменится на содержимое .ul1 .li1 .title. Т.е. на html span первого li в ul1. А вот как получить li с определённым классом? Т.е. получить li допустим с классом li7.

Comments

[Everything_is_bad]

зачем тут jquery?

[UthvfyV]

а как?

[Михаил Р.]

UthvfyV, показывайте код

[UthvfyV]

зачем код? И так я думаю всё понятно.

[Ankhena]

UthvfyV,
Действительно, зачем тут jQuery?
И что вы делали и что не получилось?

Порядок действий такой: разбейте задачу на мелкие и понятные. Гуглите по одной.
Например:
- Найти коллекцию нужных элементы
- Перебрать её
- Получить текст
- Получить класс
и т.д.

Answer 1

[alexalexes]

Выкидываем Jquery. Где видим $() - подразумеваем, что это оператор маскирует в себе document.querySelector() - для извлечения одного элемента, и document.querySelectorAll() для извлечения коллекции элементов.

А вот как получить li с определённым классом? Т.е. получить li допустим с классом li7.

Так, только нужно уточнить, из какого списка ul:

let li1_li7 = document.querySelector('ul.ul1 li.li7');
let li2_li7 = document.querySelector('ul.ul2 li.li7');

Как ни странно, учим синтаксис CSS-селекторов, чтобы не задавать этих вопросов.

Теперь надо заменить к примеру span1 на span3. Получить то я получаю.

В вашем случае для замены чего-либо в li элементах с определенным классом:

let li1_span_title = document.querySelector('ul.ul1 li.li1 span.title');
let li2_span_title = document.querySelector('ul.ul2 li.li1 span.title');
li1_span_title.innerHTML = li2_span_title.innerHTML;

Если что-то нужно делать с неопределенным числом списков ul, тогда условие задачи существенно меняется, и код тоже существенно изменится. Вот тогда вы будете что-то перебирать в нескольких списках циклом, возможно, несколькими вложенными циклами.

Comments

[Антон Антон]

а следующим этапом перейти на реактивный фреймворк, например vue, когда html рисуется из данных и по событиям меняются данные, а перерисовывается все само.

[alexalexes]

Антон Антон, нет, только натив, только хардкор.

[UthvfyV]

let li1_li7 = document.querySelector('ul.ul1 li.li7');

Вот такое мне не надо. Вы получаете конкретно .li7. А мне надо обобщить. Для чего тогда скрипт нужен. Мне надо написать что html .title в любом li в первом ul, т.е. .ul1 это то же самое что содержимое .title в li с тем же классом в .ul2. Вот основная задача, которую я не могу осилить. Надо как-то сформулировать, получить li с определённым классом. Но только не допустим .li7 а любой класс. И повторюсь, сформулмровать что html .title в любом li в первом ul, т.е. .ul1 это то же самое что содержимое .title в li с тем же классом в .ul2. Вот как такое условие написать не знаю. Пробывал по всякому. Зачем такие сложности
let li1_span_title = document.querySelector('ul.ul1 li.li1 span.title');
Можно проще
let li1_span_title = document.querySelector('.ul1 .li1 .title'); Хотя это конечно всё ерунда. Спасибо что откликнулись.

[alexalexes]

т.е. .ul1 это то же самое что содержимое .title в li с тем же классом в .ul2.

Поменяйте местами присваивание:

li2_span_title.innerHTML = li1_span_title.innerHTML;

Можно проще
let li1_span_title = document.querySelector('.ul1 .li1 .title');

У списков всегда есть тенденция к появлению субсписков внутри списка в процессе развития проекта.
Поэтому, ерунда, что опустите уточняющие теги, но не ерунда, если при любых обстоятельствах нужно сохранить связь потомок-родитель:

let li1_span_title = document.querySelector('.ul1 > .li1 > .title');

Если будет рекурсивный обход списка данным скриптом, то возможно, что дотягиваться до текущего узла-потомка нужно не через document, а через текущий узел (узлы тоже имеют методы querySelector и querySelectorAll). Утяжеление селектора с помощью "непосредственного потомка" в этом может помочь.

[UthvfyV]

я конечно преклоняюсь перед вашими умными фразами, но в данном случае оно ни к чему. С классом. ul1 только один элемент ul, так же как и все другие классы. И как-нибудь как вы пишите дотянусь. Если ни к чему то ни к чему, без всяких там заумных фраз. Если что, пардон.

Answer 2

[Артём Дайнов]

1. Получить dom объекты.
2. Заменить то, что нужно.

Answer 3

[Николай]

Не проще тогда просто копировать первый список, например так?! Если все значения первого должны быть такими же и во втором списке. Или есть какие-то исключения? А второй просто удалить?!

Answer 4

[UthvfyV]

Всем спасибо за участие, спасибо что откликнулись. Вопрос решён.

const a = $('.ul2 .title');
a.html('');
$('.ul1 .title').each((i, o) => {a.eq(i).html(a.eq(i).html() + $(o).html())})

А вообше, если кто-то заинтересутся подобной темой напишу как я её решил. Весь этот сыр бор по той причине, что если перевести текст на русский, не знаю, или любой другой язык, он (переводчик) переводит всё, даже то что спрятано, типа display: none; . В моей ситуации этого не надо. Некоторый текст не должен быть переведён, например цена, К примеру 1$ переводчик переводит как 1 дол. США, чего не надо, и другие есть тексты. Само описание должно быть переведено, но только описание. Я сначало хотел использовать

const a = $('.ul2 .title');
a.html('');
$('.ul1 .title').each((i, o) => {a.eq(i).html(a.eq(i).html() + $(o).html())})

Но потом нашёл более приемлемый вариант. К примеру 1$. Сначло я создаю атрибут data-price со значением html .price. После перевода html .price беру из data-price. А пепреводчик атрибуты не переводит слава богу.

$('.li').each(function(){
var a = $(this).find('.price').html()
$(this).find('.price').attr('data-price', a)});

//после перевода
$('.li').each(function(){
var b = $(this).find('.price').attr('data-price');
$(this).find('.price').html(b)});

$('span').removeAttr('data-price');