使用JQuery

Question

我有大量的divs用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，是否还可以隐藏任何div？

任何帮助都将不胜感激！

Answer 1

这是您的方法。首先选择所有项目，它们将处于无序集合中。然后将所有葡萄酒和所有奶酪一起分类。

此后，您要做的就是以交替顺序附加项目。我认为最简单的方法是将它们从数组底部逐个追加（从弹出（pop）开始，然后从开头（shift）移出）。

如果奶酪或葡萄酒的数量不均匀，则列表的末尾可能有相同类型的重复项。您可以使用同级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>