2010-05-11 5 views
2

그룹으로 반복하려는 요소가 많습니다. -이 예제를 사용하여 - 루프의 3 반복 (경기-1 일, 일치 하나를그룹화 된 반복을위한 CSS 선택자

<input class="matching match-1" /> 
<input class="matching match-1" /> 
<input class="matching match-2" /> 
<input class="matching match-2" /> 
<input class="matching match-2" /> 
<input class="matching match-3" /> 
<input class="matching match-3" /> 
// etc 

내가이있을 것입니다 수 있도록 그룹으로 이러한 통해 루프 나를 수 있도록 해주는 CSS 선택기를 원하는이 HTML을 고려 -2와 일치 -3). 1,2,3 등은 그룹화에 사용되는 변수이지만 고정되어 있지 않으므로이 값의 하드 코딩에 의존 할 수 없습니다. 이것은 가능한가? jQuery를 사용하거나 프로토 타입을 사용하게 될 것입니다.

감사

답변

4

이 시도하지만 그것을 테스트 할 시간이 없어 와 일치 x 인 경우 x이 표시되고 x을 색인으로 사용하여 일치 그룹 목록에 추가하십시오.

0

편집

for(i=0;i<3;i++){ 
    var str = ".matching-match-" + i; 
     $(str).each(function(index) { 
      //do something 
      }); 
    } 

내가 올바르게 통해 UR 질문을 이해 바랍니다. 이걸보고 싶니?

+0

음이 ... 그 그 루프 모든 입력 할 수 없습니다. – Cristian

+0

아니요, "1,2,3 등은 그룹화에 사용되는 변수이지만 고정되어 있지 않으므로이 값의 하드 코딩에 의존 할 수 없습니다" – robjmills

0
max = parseInt($('.matching:last-child').attr('class').match(/d+/)[0]); 
for(i = 1; i <= max; i++) { 
    $els = $('.matching.match-'+i.toString()); 
    // do whatever you want on the group 
} 
+0

죄송 합니다만 명확하지는 않지만 'i' <= 3이 될 것입니다. – robjmills

+0

첫 번째 줄을 사용하여 해당 문제를 해결합니다. –

1

표준 CSS2 (즉, 현재 널리 지원되는 구현)에는 사용할 수있는 설명이 없습니다.

그러나 CSS3에는 더 유연한 선택기가 있으며 운좋게도 모두 jQuery로 구현됩니다. 이 같은

시도 뭔가 :

$("input[name^='match-']") 

이것은 당신이 일을하려고하는 내용과 일치 DOM 노드의 jQuery를 수집을 반환합니다. 클래식 JS 또는 jQuery의 .each()으로 반복 할 수 있습니다.

+0

유감스럽게도 필요한 그룹화가 없어도 목록에있는 모든 요소를 ​​하나의 컬렉션으로 만 만들 수 있습니다. – robjmills

0

input[class^="matching match-"]. 나는 당신이 그룹화하여 무슨 뜻인지 모르겠다.

편집 :

var groups = []; 
var classes = {}; 
$('input[class^="matching match-"]').each(function() { 
    classes[$(this).attr('class')] = 1; 
}); 
for (c in classes) { 
    groups.push($('input[class="'+c+'"]')) 
} 
+0

내가 의미하는 것은 그룹입니다. 예를 들어 - 일치 -1의 클래스는 1 그룹으로 간주되므로 '$ ('selector_i_want') 위의 HTML. 길이 == 3' – robjmills

0

이 작동 할 수있다.

var groups = []; 
$(".matching").each(function(index, elem) { 
    if (this.className.match(/(?:^|\s+)match-(\d+)(?:\s|$)/)) { 
     if (typeof groups[RegExp.$1] == "undefined") { 
      groups[RegExp.$1] = []; 
     } 
     groups[RegExp.$1].push(this); 
    } 
}); 

일치하는 클래스와 요소의 목록을 반복하는 것입니다 그것은 또한의 클래스가있는 경우, 테스트 : XD는

var count = 1; 
var alreadyCounted = new Array(); 
$(".matching").each(function(){ 
    if(typeof alreadyCounted[count] == 'undefined'){ 
     $('.match-'+count).each(){ 
      // DWTFYW 
     } 
     alreadyCounted[count] = true; 
    } 
    count++; 
}); 
0

이 그룹 목록을 구축 할 것입니다 :

var classList = [] 
    $('.matching').each(function(i,e) { 
     var myClasses = ($(e).attr('class')).split(" ") 
     classList[myClasses[1]] = true  
    }) 

    for (index in classList) { 
     alert(index) 
     //your code here 
    } 
1

jQuery를 사용하여 :

var indices = {}; 
var index; 

$('.matching').each(function() { 
    index = $(this).attr('class').match(/\d+$/); 
    indices[index] = index; 
}); 

// Now you have a unique list of matching numbers for your loops