Есть некий html в переменной. Нужно найти все ссылки и заменить href каждой по принципу: href первой ссылки - текст первого элемента массива, href второй ссылки - текст второго элемента массива и т. д. Ссылок в тексте может быть от 0 до бесконечности. Измененный текст нужно поместить в переменную.
Пытался так $(text).find('a').get(i).attr('href', $href[i])
- обижается на attr.
Так $(text).find('a:eq('+i+')').attr('href', $href[i])
- тоже не то.
Помогите пожалуйста.
const text = `
<div>
<a href="link.one.ru">Link</a>
<ul>
<li>1</li>
<li>2</li>
<li><a href="link.two.ru">3</a></li>
</ul>
<div>
<a href="link.three.ru">
<img src="some.pic.ru">
</a>
</div>
</div>
`;
const links = [
'google.com',
'yandex.ru',
'vk.com'
];
// result - html c измененными ссылками
const result = $(text)
result.find('a[href]').each((i, el) => {
el.href = links[i];
});
console.log(result.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Так как у вас результат выборки - множество ссылок, нужно итерировать их все.
$(text).find('a').each(function(index) {
$(this).attr('href', $href[index]);
});
Пример:
const text = `<div>
Текст с <a href=1>некоторым</a> <a href=1>количеством</a> <a href=1>ссылок</a>
</div>`;
const el = $(text);
const $href = [
'/link1',
'/link2',
'/link3',
];
const res = el.find('a').each(function(index) {
$(this).attr('href', $href[index]);
});
console.log(el.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Для обратной итерации(Хуже, потому что больше походов в DOM):
const text = `<div>
Текст с <a href=1>некоторым</a> <a href=1>количеством</a> <a href=1>ссылок</a>
</div>`;
const el = $(text);
const $href = [
'/link1',
'/link2',
'/link3',
];
const res = $href.forEach((link, i) => el.find(`a:eq(${i})`).attr('href', link));
console.log(el.html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Второй код в вопросе почти правильный - он делает то, что нужно, но во временном объекте $(text)
. Результат получить проблематично) Обратите внимание, что у меня манипуляции производятся над объектом el
, из которого в итоге и получается результат
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Код ниже в моём понимание присваивает переменной MyTimerProto ссылку на объект у которого есть свой метод tick и прототипом объекта является HTMLElementprototype
К примеру, междуspan1 и
Есть контейнер содержимого в галерее, у него стоят display:flex и justify-content: center, так же у каждого элемента галереи есть эффект появления и исчезновенияВ...
Есть слайдер-ползунок, работающий с помощью jquery-uihttps://codepen