使用javascript

Question

对于我的列表，我想为每个4个元素应用一些不同的样式。

我尝试用这样的东西将索引除以4：

var e = document.querySelectorAll('.line li');
var y = [...e]; //convert to array from nodelist

function logArrayElements(element, index, array) {
  var y = index / 4;

  console.log(y);
}

  y.forEach(logArrayElements);

.mainUl{
  list-style: none;
  display: inline-block;
}
ulParent{float: left;}

.line{
  list-style: none;
  }
  .line li{
    padding: 10px; 
    border: 1px solid orange;
    float: left;
    }

<ul class="mainUl">
	<li class="ulParent">
	<ul class="line">
		<li>q</li>
		<li>w</li>
		<li>e</li>
		<li>r</li>
    <li>x</li>
		<li>y</li>
		<li>q</li>
		<li>z</li>
	</ul>
	</li>
	<li class="ulParent">
	<ul class="line">
		<li>q</li>
		<li>w</li>
		<li>e</li>
		<li>r</li>
    <li>x</li>
		<li>y</li>
		<li>q</li>
		<li>z</li>
	</ul>
	</li>
	<li class="ulParent">
	<ul class="line">
		<li>q</li>
		<li>w</li>
		<li>e</li>
		<li>r</li>
    <li>x</li>
		<li>y</li>
		<li>q</li>
		<li>z</li>
	</ul>
	</li>
</ul>

但是并没有真正起作用。

所以我想要的是计算4到4之间的元素，并为每组四个元素应用不同的css样式。

Answer 1

你可以用普通的css做到这一点。

首先回答JS：

您首先想要实际循环“行”，然后循环其中的项目：

const lines = [...document.querySelectorAll('.line')];

lines.forEach(function (line) {
    // should get you your 0, .25, .5, .75 etc...
    [...line.querySelectorAll('li')].forEach(logArrayElements);
});

现在为CSS乐趣：

基本上可以使用nth-child方法，我在这里做的方式很粗糙，但这是一个开始。

.mainUl {
  list-style: none;
  display: inline-block;
}
ulParent {
  float: left;
}
.line {
  list-style: none;
}
.line li {
  padding: 10px;
  border: 1px solid orange;
  float: left;
}

.line li:nth-child(n) {
    background: red;
}
.line li:nth-child(n+5) {
    background: purple;
}
.line li:nth-child(n+9) {
    background: green;
}
.line li:nth-child(n+13) {
    background: grey;
}
/// etc

<ul class="mainUl">
  <li class="ulParent">
    <ul class="line">
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>r</li>
      <li>x</li>
      <li>y</li>
      <li>q</li>
      <li>z</li>
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>r</li>
      <li>x</li>
      <li>y</li>
      <li>q</li>
      <li>z</li>
    </ul>
  </li>
  <li class="ulParent">
    <ul class="line">
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>r</li>
      <li>x</li>
      <li>y</li>
      <li>q</li>
      <li>z</li>
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>r</li>
      <li>x</li>
      <li>y</li>
      <li>q</li>
      <li>z</li>
    </ul>
  </li>
  <li class="ulParent">
    <ul class="line">
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>r</li>
      <li>x</li>
      <li>y</li>
      <li>q</li>
      <li>z</li>
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>r</li>
      <li>x</li>
      <li>y</li>
      <li>q</li>
      <li>z</li>
    </ul>
  </li>
</ul>