jquery - 使用 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>

<小时/>

更新

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

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

<小时/>

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

在每次迭代中，我们都会创建一个新的 <li>文本和类等于被迭代的颜色。

然后我们创建一个对应于 n 的 HTMLString通过传递 outerHTML 来获取此类元素的数量样本数量<li>我们创建了数组 join() 方法如下:

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

然后我们 append() 这个HTMLString到<ul> ，我们还创建了一个按钮 prepend() 是一群类似的<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 类是不切实际的。