计算标题类之前和之后的所有 Item 类元素

Posted 2023-05-09

【中文标题】计算标题类之前和之后的所有 Item 类元素

【英文标题】：Counting all Item class elements before and after header classes

【发布时间】：2013-12-23 23:01:46

【问题描述】：

嘿，我正在考虑一个问题的 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>

非常感谢您的帮助。

【问题讨论】：

什么时候添加表头？什么时候添加项目？

这一切都添加到 $.each 中，然后在迭代结束时我想检查剩下的内容。

【参考方案1】：

看看这是否有效：

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

【讨论】：

这是最好的方法！但是你应该使用return !$(this).next().hasClass('item')，所以它也适用于最后一个标题。并且使用after() 而不是append() 将按照他的要求在标题div 之后添加p（不在标题div 中）:)

优秀。谢谢你的解决方案。 return !$(this).next().hasClass('item');在这种情况下更受欢迎。

【参考方案2】：

这是我给你的想法： - 您可以添加一个类名组以包括标题类和项目类，如下所示：

<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>');
   

);