jQuery - Если все дочерние элементы имеют одинаковый класс, добавьте дополнительный класс к другому элементу на странице - PullRequest
Новая
       36

jQuery - Если все дочерние элементы имеют одинаковый класс, добавьте дополнительный класс к другому элементу на странице

0 голосов
/ 21 февраля 2020

Я хотел бы иметь возможность проверить, используя jQuery, все ли дочерние элементы имеют один и тот же класс. Если все дочерние элементы имеют один и тот же класс, я бы хотел применить дополнительный класс к другому элементу на странице, который не является прямым дочерним элементом, но ближайшим h4.

Указанные элементы HTML находятся в прикрепленное изображение. Код автоматически генерируется плагином.

В настоящее время я ищу любые элементы, которые содержат 0 и класс, к которому элементы не применяются. Это можно увидеть на скриншоте.

h4 в верхней части изображения - это элемент, который нуждается в добавлении класса, если все дочерние элементы имеют класс «no-items»

Basi c HTML Пример 

<div>
<h4>This is the element that needs a class if all li's have the class of no-items</h4>
<ul>
    <li class="no-items">0</li>
    <li class="no-items">0</li>
    <li class="">1</li>
    <li class="no-items">0</li>
</ul>

enter image description here

Новый код опробован и результаты показаны на скриншоте.

введите описание изображения здесь 

$('.woof_container_inner h4').addClass(function(){
if( $(this).next('ul').find('li').length === $(this).next('ul').find('li.noitems').length ) return 'someclass';

})

«someclass» следует применять только к элементу H4, если все li в пределах ul иметь класс без предметов. Если не делать ничего,

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020

Используя код из @ j08691, ответьте с небольшими правками, и я рад сообщить, что следующий код работает для меня. 

$('.woof_container_inner h4').addClass(function(){
if( $(this).next('div').find('li').length === $(this).next('div').find('li.noitems').length ) return 'no-heading';

})

Я скомбинировал приведенный выше код со следующим, поэтому он выполняется после выбора каждого фильтра Ajax.

$ (document) .ajaxSuccess (function () {

$ ('. woof_container_inner h4'). addClass (function () {if ($ (this) .next ('div'). find ('li'). length == = $ (this) .next ('div'). find ('li.noitems'). length) return 'no-heading';})

});

0 голосов
/ 21 февраля 2020

Это бы сработало: 

$('h4').addClass(function(){
    if( $(this).next('ul').find('li').length === $(this).next('ul').find('li.no-items').length ) return 'someclass';
})

Это будет применяться ко всем элементам h4 на странице, поэтому вам может потребоваться сделать его более конкретным c.

Что это выполняет поиск элемента h4 и добавляет класс, если число элементов списка в списке, следующем за ним, равно количеству элементов списка с классом no-items.

...