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

我试图使用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>

---

这就是你要找的吗

您想要

.prepend（）

您的

li

HTML

更新 我更新了以使用可变数量的元素

像这样：

您可以使用以下方法：

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

白色的
白色的
白色的
白色的
白色的
白色的
蓝色的
蓝色的
蓝色的
蓝色的
蓝色的
蓝色的
红色的
红色的
红色的
红色的
红色的
红色的

这些类在哪里定义？你的最终目标是什么还不是100%清楚。这看起来像是一份工作。prepend（）！谢谢你的快速回复，这几乎就是我想要的！对不起，我没有提供足够的信息。我没有一个按钮，而是有3个颜色按钮，当我单击颜色按钮时，该类的列表项需要移到列表的顶部。i、 e.当我单击“蓝色”时，蓝色移动到列表顶部（从中间位置）。谢谢太好了，非常感谢！与上面的另一个解决方案一样，我需要从数据属性（so）动态获取这些颜色。您知道将其与您的解决方案集成的最佳方法是什么吗？再次感谢是的，但我需要更多信息。您是否使用来自父div的颜色动态生成

li

标记？一个div有所有的颜色吗？太棒了，谢谢大家！我喜欢这个解决方案，因为我需要从数据属性中获取颜色，所以我需要将它们放入类似于此的数组中。你能给我一个指针，告诉我如何从div中获得颜色，比如说？谢谢我知道您已经根据数组中的颜色动态创建了按钮，但我已经准备好了这些按钮（样例）（来自另一个数据源）。你能告诉我如何使用你的代码，但不生成按钮，所以我仍然使用点击功能吗？谢谢@casiokid您的按钮与特定组有何关联。。？id/类/数据属性，或文本。。？第一个片段包含一个基于按钮文本的演示…它们由数据属性data color=“”关联，因此您的映射函数从这些按钮/div获取所有颜色。

<button id="white">Move White</button><button id="blue">Move Blue</button><button id="red">Move Red</button>
<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').click(function(e) {
    var color = $(this).prop('id');
    var $lis = $('li.' + color);
    $lis.remove();
    for (var i = 0; i < $lis.length; i++) {
        $('ul').prepend('<li class="' + color + '">' + color + '</li>');
    }        
});

li {
    padding: 10px;
    list-style: none;
}

.white {
    background-color: lightgray;
}

.blue {
    background-color: lightblue;
}

.red {
    background-color: pink;
}

$('input').click( function(e) {
    var c = $(e.target).val();
    $('ul').find('.'+c).each( function( index, element ) {
        console.log(element);
        $('ul').prepend(element);
    });
});

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