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

这是你在找什么？

<强> FIDDLE

您希望.prepend() li。<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>。

HTML

$('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>');
    }        
});

JS

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

.white {
    background-color: lightgray;
}

.blue {
    background-color: lightblue;
}

.red {
    background-color: pink;
}

CSS

{{1}}

更新

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

Answer 2

您可以使用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的{{3}}传递给数组outerHTML方法来创建与<li>个这样的元素相对应的HTMLString，如：

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

然后join() HTMLString <ul> <li>，我们创建了一个append()组<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-*

附注：如果您想为按钮添加不同的文本，可以将数据保存为<li>属性，并使用它来查找相应的组。

另外，为了演示，我已经添加了CSS类，你应该在创建{{1}}时应用css，因为在动态执行此操作时使用预定义的CSS类是不切实际的。

Answer 3

像这样：

http://jsfiddle.net/CaseyRule/vkgrozj8/3/

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

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

3 个答案:

更新

更新