Javascript jQuery-如果所有子元素都具有相同的类,则向页面上的另一个元素添加其他类

Javascript jQuery-如果所有子元素都具有相同的类,则向页面上的另一个元素添加其他类,javascript,jquery,html,jquery-selectors,Javascript,Jquery,Html,Jquery Selectors,我希望能够使用jQuery检查所有子元素是否共享同一个类。如果所有的子元素都有相同的类,那么我想对页面上不是直接子元素而是最接近h4的另一个元素应用一个额外的类 所讨论的HTML元素在所附的图像中。代码由插件自动生成 目前,我正在寻找任何包含0的元素,并且没有应用任何项的类。这可以在截图中看到 如果所有子级都具有“no items”类,则图像顶部的h4是需要添加类的元素 基本HTML示例 <div> <h4>This is the element that needs a

我希望能够使用jQuery检查所有子元素是否共享同一个类。如果所有的子元素都有相同的类,那么我想对页面上不是直接子元素而是最接近h4的另一个元素应用一个额外的类

所讨论的HTML元素在所附的图像中。代码由插件自动生成

目前,我正在寻找任何包含0的元素,并且没有应用任何项的类。这可以在截图中看到

如果所有子级都具有“no items”类,则图像顶部的h4是需要添加类的元素

基本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>
})


“someclass”仅适用于ul中所有li均为无项目的H4元件。如果不这样做,什么也不做。

这会起作用:

$('h4').addClass(function(){
    if( $(this).next('ul').find('li').length === $(this).next('ul').find('li.no-items').length ) return 'someclass';
})
这将应用于页面上的所有h4元素,因此您可能需要使其更加具体


它所做的是查找一个h4元素并添加一个类,如果它后面的列表中的列表项的数量等于没有项目类的列表项的数量。

使用@j08691 answer中的代码并进行一些小的编辑,很高兴地说下面的代码对我有用

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

我将上面的代码与下面的代码结合在一起,因此它会在选择每个Ajax过滤器后执行

$(文档).ajaxSuccess(函数(){

$('.woof\u container\u inner h4').addClass(函数(){ if($(this.next('div')).find('li').length==$(this.next('div').find('li.noitems').length)返回“no heading”; })


}))

$('ul>li:not(.no items)”)。长度>0将告诉您其中是否有人没有该类。您好,谢谢您的输入,如果可能的话,您可以进一步扩展吗?以及如何将其应用于壁橱H4。谢谢。嗨,谢谢你的意见,不幸的是,我似乎不能单独针对每个ul。我将尝试附加另一个图像的问题,以显示更多的代码。当前,无论最近的元素列表是否都具有.noitems类,该类都会添加到每个h4中。是否有一种方法可以循环找到的每个实例或类似实例的代码?您最初发布的代码与您添加的图像不匹配,这就是原因。您是否可以提供更多建议或无法提供解决方案?谢谢。@MrSpurs尝试将
$(this.next('ul').find('li')
)更改为
$(this.next('div').find('li')
)在我上面的示例中谢谢,但这似乎仍然会将某个类的类添加到每个h4中,即使li不共享同一类。。。。。撒个谎我想这是可以解决的!
$('.woof_container_inner h4').addClass(function(){
if( $(this).next('div').find('li').length === $(this).next('div').find('li.noitems').length ) return 'no-heading';