클래스 그룹의 ID 증가

클래스의 색상별로 그룹화 된 목록 항목이 있으며 각 목록 항목 ID에 1-6의 숫자를 할당하려고합니다. 나는 아래의 시도클래스 그룹의 ID 증가

<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>

하지만 1로 재설정 대신 다음 색상 클래스에서 카운터를 계속 : 그래서 아래 사용 JQuery와 달성하고자하는

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

출처

2014-11-26 casiokid

고유 한 ID 여야합니다. 아마도 기타 데이터를 저장하기 위해'data-'를 사용하십시오. – dotty

질문은 "** 왜 ** 그렇게하고 싶니?"입니다. 나는 이것이 필요하지 않을 것이라고 내기했다 – pomeh

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>

// 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/

출처

2014-11-26 12:05:49 Tejesh

고마워, 네가 데이터 속성을 사용하는 것이 더 좋을 것이다. 고마워요! – casiokid