Как добавить класс в jQuery, когда внутри html-элементов нет контента?
Я работаю над веб-сайтом wordpress/php, на котором я хочу добавить класс, когда внутри дочерних классов нет контента.
Отформатированный HTML:
<div class = "featured-block">
<a href = "/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit">
<img class = "default-opacity" src = "" data-fallback-img = "" alt = "">
</figure>
</div>
</a>
<a href = "/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit">
<img class = "default-opacity" src = "" data-fallback-img = "" alt = "">
</figure>
</div>
</a>
<!-- -->
<a href = "/149553/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit"> // It should be added here only
<img src = "" srcset = "">
</figure>
<div class = "featured-block__content">
<h1 style = "margin-bottom:0px;" class = "featured-block__title"></h1>
// No content
<h1 class = "featured-block__tag"></h1>
// No content
</div>
</div>
</a>
<!-- -->
<a href = "/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit">
<img src = ""
</figure>
<div class = "featured-block__content">
<h1 style = "margin-bottom:0px;" class = "featured-block__title">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h1>
<h1 class = "featured-block__tag"> More Coverage</h1>
</div>
</div>
</a>
</div>
Вот логика, которую я использовал в jQuery, но она, похоже, не работает должным образом, так как везде добавляется класс. Его нужно добавить в то место, где я прокомментировал // Должен быть добавлен только здесь
jQuery(function($) {
if ($(".featured-block__title").is(":empty") && $(".featured-block__tag").is(":empty")) {
$(".img-fit").addClass("opacity-pointseven");
}
})
Постановка задачи:
Мне интересно, какие изменения мне нужно внести в приведенный выше код jQuery, чтобы класс добавлялся только в том месте, где нет дочерних элементов содержимого.
Вот так: jsfiddle.net/khrismuc/0356bnd2
@Chris G Это выглядит хорошо, спасибо за помощь, но позвольте сказать, хочу ли я добавить класс внутри тега img. Могу ли я использовать что-то вроде этого $(this).find(".img-fit img").addClass("opacity-pointseven");
тег img находится под строкой <figure class = "featured-block__image img-fit">
Эта линия <img src = "" srcset = "">
Да, это должно работать как есть.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Не нужен jquery.
if (
document.querySelector('.featured-block__title > *').length === 0 &&
document.querySelector('.featured-block__tag > *').length === 0
) {
// add class here
}
Спасибо за ответ. Кажется, это не работает, поскольку класс, который я хочу добавить, добавляется повсюду.
Тогда вам нужны более конкретные селекторы.
.img-fit используется везде в html-документе. Есть ли способ настроить таргетинг только на определенные img-fit?
Ах, я вижу, что вы спрашиваете. Одна минута.
Я думаю, что ваш пример выключен. Там, где у вас есть комментарий о том, куда должен идти класс, у этого div есть контент. Пустой элемент img.
<h1 style = "margin-bottom:0px;" class = "featured-block__title"></h1> // No content <h1 class = "featured-block__tag"></h1> // No content В нем нет контента, поэтому место, где я добавил комментарий (// It should be added here only), должно было добавить класс при загрузке страницы.
Я думаю, я не объяснил вопрос должным образом.
Давайте продолжить обсуждение в чате.
Добрый день. Возможно, вы пытаетесь проверить, пусто ли оно. Попробуй это:
// Checks if div is empty, Uses trim to prevent unwanted spaces
if ( $.trim( $('.featured-block__title').text() ).length == 0 ) {
// If empty add class to element
$(".img-fit").addClass("opacity-pointseven");
}
Повеселись!
Пытающийся. Следите за обновлениями.
Вам нужно перебрать родительский элемент и выполнить запрос только внутри этого элемента. В нынешнем виде каждый из ваших запросов применяется ко всему документу.
Вы, вероятно, захотите использовать метод each() для перебора разделов и запроса только внутри раздела с использованием параметра this. Что-то вроде этого:
$('.featured-block__item').each(function() {
if ($(".featured-block__title", this).is(":empty") && $(".featured-block__tag", this).is(":empty")) {
$(this).find(".img-fit").addClass("opacity-pointseven")
}
}).img-fit.opacity-pointseven {
color: green;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "featured-block">
<a href = "/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit">
<img class = "default-opacity" src = "" data-fallback-img = "" alt = "">
</figure>
</div>
</a>
<a href = "/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit">
<img class = "default-opacity" src = "" data-fallback-img = "" alt = "">
</figure>
</div>
</a>
<!-- -->
<a href = "/149553/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit"> // It should be added here only
<img src = "" srcset = "">
</figure>
<div class = "featured-block__content">
<h1 style = "margin-bottom:0px;" class = "featured-block__title"></h1>
// No content
<h1 class = "featured-block__tag"></h1>
// No content
</div>
</div>
</a>
<a href = "/" class = "featured-block__item cf">
<div class = "featured-block__item-inner">
<figure class = "featured-block__image img-fit">
<img src = ""
</figure>
<div class = "featured-block__content">
<h1 style = "margin-bottom:0px;" class = "featured-block__title">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h1>
<h1 class = "featured-block__tag"> More Coverage</h1>
</div>
</div>
</a>
</div>Скажем, если я хочу добавить класс внутри тега img. Могу ли я использовать что-то вроде этого $(this).find(".img-fit img").addClass("opacity-pointseven");
тег img находится под строкой <figure class = "featured-block__image img-fit">
Эта линия <img src = "" srcset = "">
Правильно — если бы вы хотели добавить класс в сам тег img, вы бы использовали $(this).find(".img-fit img").addClass("opacity-pointseven")
Кроме того, если мы хотим стилизовать его $(this).find(".img-fit img").style.opacity = "0.7 !important";, мы можем использовать его так? Это правильно?
Это выходит за рамки вашего первоначального вопроса, но обычный способ применения стилей в jQuery — использовать помощник css. api.jquery.com/css/#css-propertyName-значение
Вам нужно использовать петлю
$('.theclass').each(). Внутри функции вы можете использовать$(this)для ссылки на текущий элемент.