jQuery - 如果所有子元素都具有相同的类，则将附加类添加到页面上的另一个元素

Posted 2023-05-09

【中文标题】jQuery - 如果所有子元素都具有相同的类，则将附加类添加到页面上的另一个元素

【英文标题】：jQuery - If all Child elements have same class add additional class to another element on the page

【发布时间】：2020-06-06 04:26:29

【问题描述】：

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

有问题的 html 元素在附件中。代码由插件自动生成。

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

图像顶部的 h4 是需要添加一个类的元素，如果所有子元素都有“no-items”类

基本 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 元素，如果 ul 中的所有 li 的类都没有项目。如果不是什么都不做。

【问题讨论】：

$('ul > li:not(.no-items)').length > 0 会告诉你，如果没有那个类。

您好 感谢您的意见，如果可能的话，您能否进一步扩展？以及如何将其应用于壁橱 H4。谢谢。

【参考方案1】：

这样就可以了：

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

这将应用于页面上的所有 h4 元素，因此您可能需要使其更具体。

它的作用是寻找一个 h4 元素并添加一个类，如果它后面的列表中的列表项数等于无项类的列表项数。

【讨论】：

您好，感谢您的意见，不幸的是，我似乎无法单独针对每个 ul。我将尝试在问题中附加另一张图片以显示更多代码。目前，无论最接近的元素列表是否都具有 .noitems 类，该类都被添加到每个 h4 中。有没有办法为找到的每个实例或类似的东西循环代码？

您最初发布的代码与您添加的图像不匹配，这就是原因。

您能提供更多建议还是无法提供解决方案？谢谢。

@MrSpurs 在上面的示例中尝试将$(this).next('ul').find('li') 更改为$(this).next('div').find('li')

谢谢，但这似乎仍然会在每个 h4 中添加 someclass 的类，即使 Li 的不共享同一个类.....撒个谎，我认为它可能是排序的！

【参考方案2】：

使用来自@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 '无航向'; )

);