Как найти атрибуты у элементов с помощью jquery

171

В этой статье рассмотрим, как найти атрибуты у элементов с помощью 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>

Скрипт примера:

<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>

По аналогии можно найти любые атрибуты у элемента: src, disabled, width, height, value и пр.

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code