В этой статье рассмотрим, как найти атрибуты у элементов с помощью jquery.
1 Пример 1: найдем атрибуты href у ссылок в блоках и при клике на блок будем открывать эти ссылки в браузере:
Разметка примера:
<div class=col><a href="page.html" title="ссылка 1">Ссылка 1</a></div>
<div class=col><a href="page2.html" title="ссылка 2">Ссылка 2</a></div>
<div class=col><a href="page3.html" title="ссылка 3">Ссылка 3</a></div>
<div class=col><a href="page2.html" title="ссылка 2">Ссылка 2</a></div>
<div class=col><a href="page3.html" title="ссылка 3">Ссылка 3</a></div>
Скрипт примера:
<script>
jQuery(document).ready(function () {
$('.col').click(function() {
let url = $(this).find("a").attr("href"); // находим атрибут
window.open(url, '_blank'); // при клике открываем окно по ссылке из атрибута
});
});
</script>
jQuery(document).ready(function () {
$('.col').click(function() {
let url = $(this).find("a").attr("href"); // находим атрибут
window.open(url, '_blank'); // при клике открываем окно по ссылке из атрибута
});
});
</script>
2 Пример 2: найдем все атрибуты title у ссылок в блоках и выведем их алертом:
<script>
jQuery(document).ready(function () {
let arr=[]; // задаем массив
$('.col').each(function(){ // обходим все блоки
let url = $(this).find("a").attr("title"); // находим атрибуты
arr.push(url) // добавляем атрибуты в массив
});
alert(arr); // выводим массив
});
</script>
jQuery(document).ready(function () {
let arr=[]; // задаем массив
$('.col').each(function(){ // обходим все блоки
let url = $(this).find("a").attr("title"); // находим атрибуты
arr.push(url) // добавляем атрибуты в массив
});
alert(arr); // выводим массив
});
</script>
По аналогии можно найти любые атрибуты у элемента: src, disabled, width, height, value и пр.
