使用 jQuery 为每六个列表项添加不同的类

Question

我正在尝试使用 jQuery 为每六个列表项添加一个不同的类。

我试过查看.append() 和.after()，但我不确定使用它们的逻辑。

我将如何通过 JQuery 实现以下结构：

<ul>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="white">white</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="blue">blue</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
  <li class="red">red</li>
</ul>

我还想在单击按钮时将具有相同类别的六个项目组移动到列表顶部。

脚本：

$('button').on('click', function(){
   $('ul li.blue').append($('ul li:nth-child(2)'));
});

Answer 1

您可以使用slice()方法如下：

var colors = ["white", "blue", "red"];
var $listItems = $("li");
$.each(colors, function(i, color) {
  $listItems.slice(i * 6, ++i * 6).addClass(color);
  $("body").append($("<button/>", {
    text: color,
    css: {
      "background-color": color
    }
  }))
});

var colors = ["white", "blue", "red"];
var $listItems = $("li");
$.each(colors, function(i, color) {
  $listItems.slice(i * 6, ++i * 6).addClass(color);
  $("body").append($("<button/>", {
    text: color,
    css: {
      "background-color": color
    }
  }))
});

$('button').on('click', function() {
  $('ul li.' + $(this).text()).prependTo('ul');

});

ul {
  list-style-type: none;
}
li {
  width: 100px;
  height: 20px;
  border: 1px solid;
}
.white {
  background: #fff;
}
.blue {
  background: dodgerblue;
}
.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>white</li>
  <li>white</li>
  <li>white</li>
  <li>white</li>
  <li>white</li>
  <li>white</li>
  <li>blue</li>
  <li>blue</li>
  <li>blue</li>
  <li>blue</li>
  <li>blue</li>
  <li>blue</li>
  <li>red</li>
  <li>red</li>
  <li>red</li>
  <li>red</li>
  <li>red</li>
  <li>red</li>
</ul>

---

更新

根据您的评论，您可以使用map() 方法从data() 属性中提取颜色，例如：

var colors = $("div").map(function(){
  return $(this).data("color");
});

---

您可以使用 jQuery each() 方法迭代我们提取的颜色数组。

在每次迭代中，我们创建一个新的<li>，其文本和类与被迭代的颜色相同。

然后我们通过将我们创建的示例<li> 的outerHTML 传递给数组join() 方法来创建一个对应于n 数量的HTMLString，例如：

new Array(7).join($li.get(0).outerHTML);

然后我们将append() 这个HTMLString 到<ul>，还创建一个按钮，prepend() 是一组与<li> 相似的<li> 到<ul>，以便将它们放在列表的顶部.

---

var colors = $("div").map(function() {
  return $(this).data("color");
});
var $ul = $("ul"),
  $body = $("body");
$.each(colors, function(i, color) {
  var $li = $("<li/>", {
    text: color,
    class: color
  });
  $ul.append(new Array(7).join($li.get(0).outerHTML));
  $body.append($("<button/>", {
    text: color,
    css: {
      "background-color": color
    },
    on: {
      click: function() {
        $('ul li.' + $(this).text()).prependTo('ul');
      }
    }
  }));
});

ul {
  list-style-type: none;
}
li {
  width: 100px;
  height: 20px;
  border: 1px solid;
}
.white {
  background: #fff;
}
.blue {
  background: dodgerblue;
}
.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-color="white"></div>
<div data-color="blue"></div>
<div data-color="red"></div>
<ul>
</ul>

---

附注：如果您想为按钮设置不同的文本，可以将数据保存为data-* 属性并使用它来查找相应的组。

另外，为了演示，我添加了 CSS 类，您应该在创建 <li> 时应用 css，因为动态执行此操作时使用预定义的 CSS 类是不切实际的。