时间戳

首页 > 解决方案 > 使用 JQuery 替换和隐藏 div

javascript - 使用 JQuery 替换和隐藏 div

问题描述

我有大量的 div 正在使用 PHP 输出到页面，它们具有“奶酪”或“葡萄酒”两个类之一：

<div class="cheese"></div>
<div class="wine"></div>
<div class="cheese"></div>
<div class="cheese"></div>
<div class="cheese"></div>
<div class="wine"></div>

如何使用 jquery 让它们交替出现？所以它们看起来像这样：

<div class="cheese"></div>
<div class="wine"></div>
<div class="cheese"></div>
<div class="wine"></div>
<div class="cheese"></div>
<div class="wine"></div>

如果最后有两个“奶酪”div然后隐藏最后一个，是否也可以隐藏任何div？

非常感谢任何帮助！

标签： javascriptjquery

解决方案

这是你可以做到的。首先选择所有项目，它们将处于无序集合中。然后将所有葡萄酒分类，然后是所有奶酪。

之后，您需要做的就是以交替顺序附加项目。我认为最简单的方法是一个接一个地从数组中取出项目，从底部（弹出），然后从开始（移位）。

如果您的奶酪或酒的数量不均匀，那么列表的最后可能会有相同类型的重复项目。您可以使用同级 CSS 选择器 ( .wine + .wine) 隐藏那些多余的项目。

const container = document.querySelector('.container')
const items = document.querySelectorAll('.cheese, .wine')

const sorted = [...items].sort((a, b) => {
  return a.className === b.className ? -1 : 1
})

while (sorted.length) {
  let item = sorted.length % 2 ? sorted.shift() : sorted.pop()
  container.appendChild(item)
}
/* hide repeating items */
.cheese + .cheese,
.wine + .wine {
  display: none;
}

/* visual styles */
.cheese,
.wine {
  width: 200px;
  height: 25px;
  margin-bottom: 5px;
}

.cheese {
  background: yellow;
}

.wine {
  background: red
}
<div class="container">
  <div class="cheese"></div>
  <div class="wine"></div>
  <div class="wine"></div>
  <div class="wine"></div>
  <div class="cheese"></div>
  <div class="cheese"></div>
  <div class="wine"></div>
  <div class="wine"></div>
</div>

推荐阅读