Как изменить атрибут aria с помощью Jquery?
У меня есть следующий код, в котором я хотел бы изменить атрибут aria-describedby, чтобы он соответствовал тексту <h3></h3>, содержащемуся в этом div. Мне нужно идентифицировать каждый div по классу .slick-slide.
- Обратите внимание, что обычно на странице с классом slick-slide у меня есть 3–6 элементов div.
<div class = "cards__card cards__card--1 cards__slide section--light slick-slide slick-current slick-active" data-slick-index = "0" aria-hidden = "false" tabindex = "0" role = "tabpanel" id = "slick-slide00" aria-describedby = "slick-slide-control00">
<div class = "cards__slide-wrapper self-center">
<h3 class = "section__header cards__header heading heading--h3 ">--- HEADER ---</h3>
<div class = "cards__item cards__item--copy">
<p> --- SAMPLE TEXT ---</p>
</div>
<div class = "cards__pagination cards__pagination--black">
<p class = "copy--disclaimer">1 / 4</p>
</div>
</div>
</div>
Я пробовал следующее, но безрезультатно:
$('div .slick-slide').each(function () {
var h3 = $(this).closest("h3").text();
$(this).attr("aria-describedby", h3);
});
Заранее спасибо!
.closest() должно быть .find(). closest() ищет содержащий элемент, а не то, что содержится внутри.
aria-describedby ожидает список других элементов id, а не просто текст.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
.closest() jQuery выполняет поиск по иерархии, тогда как вы хотите искать внутри контейнера .slick-slide.
Вместо этого используйте .find() для поиска внутри элемента.
Как упоминалось в нескольких комментариях, aria-describedby не является атрибутом произвольного текста. Его значение должно быть списком...
id элементов, описывающих объект.
Я бы подошел к этому, получив или создав идентификатор <h3> и присвоив его атрибуту.
Кроме того, возможно, вам не обязательно нужен jQuery
document.querySelectorAll('.slick-slide[id]').forEach((c) => {
const heading = c.querySelector('h3');
if (heading) {
if (!heading.id) {
heading.id = `${c.id}--heading`;
}
c.setAttribute('aria-describedby', heading.id);
}
console.info('aria-describedby:', c.getAttribute('aria-describedby'));
});<div
class = "cards__card cards__card--1 cards__slide section--light slick-slide slick-current slick-active"
data-slick-index = "0"
aria-hidden = "false"
tabindex = "0"
role = "tabpanel"
id = "slick-slide00"
aria-describedby = "slick-slide-control00"
>
<div class = "cards__slide-wrapper self-center">
<h3 class = "section__header cards__header heading heading--h3">
--- HEADER ---
</h3>
<div class = "cards__item cards__item--copy">
<p>--- SAMPLE TEXT ---</p>
</div>
<div class = "cards__pagination cards__pagination--black">
<p class = "copy--disclaimer">1 / 4</p>
</div>
</div>
</div>Спасибо, Фил. Я попробовал обе версии вашего кода, но ни одна из них у меня не работает. Не понимаю почему, мне кажется, что редактировать, неважно, это работает! Спасибо!
На данный момент я против, так как код может делать то, что задумано, но установка обычного текста в качестве значения атрибута, заканчивающегося на by, недействительна. Требуется идентификатор.
@Энди, это вряд ли имеет отношение к реальной проблеме, которую пытался решить ОП
@Энди, я обновил ответ, указав правильное значение aria-describedby
div .slick-slide, наверное, должно бытьdiv.slick-slide. Пробел означает поиск потомкаdiv, но.slick-slide— это класс самого div.