Question

我在一个类中有一些按颜色分组的列表项，我想为每个列表项ID分配一个1-6的数字。所以我想使用JQuery实现以下目标：

＆＃13;

<ul>
  <li class="blue" id="1">Blue</li>
  <li class="blue" id="2">Blue</li>
  <li class="blue" id="3">Blue</li>
  <li class="blue" id="4">Blue</li>
  <li class="blue" id="5">Blue</li>
  <li class="blue" id="6">Blue</li>
  <li class="red" id="1">Red</li>
  <li class="red" id="2">Red</li>
  <li class="red" id="3">Red</li>
  <li class="red" id="4">Red</li>
  <li class="red" id="5">Red</li>
  <li class="red" id="6">Red</li>
<ul>

＆＃13;

我已经尝试了以下但它继续从下一个颜色类的计数器，而不是重置为1：

＆＃13;

// get all colours from label data-color attribute
var colors = $("label").map(function() {
  return $(this).data("color");
});


var $ul = $("ul#slideImages"),
$swatches = $(".swatches");

// for each colour, create and add colour class to <li>
$.each(colors, function(i, color) {
  var $li = $("<li/>", {
    class: color
  });
  $ul.append(new Array(7).join($li.get(0).outerHTML));
});

// for each <li> colour class add an incremented ID 
var number = 0;
$('ul#slideImages li').each(function(i){
   number++;
   $(this).attr('id', number);
});

＆＃13;

Answer 1

HTML

<ul id="slideImages">
  <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" id="6">Red</li>
<ul>

JS

// get all colours from label data-color attribute
colors = ['blue','red'];

var colorCount = {};
for(var i=0;i<colors.length;i++){
    colorCount[colors[i]] = 0;
}
//colorCount = {c1:0,c2:0,c3:0}



// for each <li> colour class add an incremented ID 
$('ul#slideImages li').each(function(i){
   var color = $(this).attr('class');//or whatever attr which gives color
   colorCount[color] += 1;
   $(this).attr('id', colorCount[color]);
});

通常不建议使用具有相同ID值的多个元素。但是你可以处理它们，如果你可以使用组合选择器仔细地进行处理，这将使它独特（我建议不要）

PS：我跳过了js的某些部分，这与这个问题无关

jsFiddle：http://jsfiddle.net/ntjuxLy4/1/

Answer 2

对于HTML中的每个元素，ID都必须是唯一的。如果您不遵循此规则，则会产生无效的HTML。

我的建议是保持您的代码不变，因为它具有每个元素的唯一ID。

根据@dotty的建议，您可以使用数据属性向元素添加元数据。

增加类组中的ID

2 个答案: