计算表头类之前和之后的所有Item类元素

Counting all Item class elements before and after header classes

本文关键字：Item 元素 表头 计算 之后      更新时间：2024-04-29

嘿，我正在考虑一个问题的Jquery解决方案。下面你可以看到我在每个标题后面都有项目，现在这很好。

<div class="header"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="header"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="header"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

但有时会出现没有物品的情况。仅标题：

<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="item"></div>

在这种情况下，我想检查每个标题后面是否有任何项目。如果没有添加段落文本"不可用"，如：

<div class="header"></div>
<p>Not Available</p>
<div class="header"></div>
<p>Not Available</p>
<div class="header"></div>
<div class="item"></div>

非常感谢你的帮助。

看看这是否有效：

$('.header').filter(function(){
     return $(this).next().hasClass('header');
     // or return !$(this).next().hasClass('item');
}).after('<p>Not Available</p>')

这是我的想法：-您可以添加一个类名组来包括头类和项类，如下所示：

<div class="groups">
  <div class="header"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="groups">
....
</div>
....

现在你有很多小组。你要做的是统计每一组，并检查项目是否存在：

$('.groups').each(function(){
   if($(this).children('items').length > 0){
      // found items class
   }
   else{
      // not found any items class
      $(this).append('<p>Not Available</p>');
   }
});
相关文章：