2014-01-12 6 views
0

jquery 초보자이고 다음을 수행하려고합니다.여러 요소에 클래스 추가

div가 여러 개 있습니다. 각 인스턴스에 무작위로 클래스를 추가합니다 (일부 속성을 변경하기 위해). 추가 된 클래스는 목록에서 가져옵니다.

이 잘 작동하지만 지금은 이전의 child-div에 동일한 (임의의) 클래스를 추가하려고합니다. (가) 내가 시도 다음

var classes = ['blue', 'yellow', 'lightorange', 'violet', 'green']; 
var prevClass = ""; 
$('.randomcolor').each(function() { 
    var classes2 = []; 
    for (var i = 0; i < classes.length; i++) { 
     if (classes[i] !== prevClass) { 
      classes2.push(classes[i]); 
     } 
    } 
    $(this).addClass(prevClass = classes2[Math.floor(Math.random()*classes2.length)]); 
}); 

과 :

내 HTML은 다음과 같습니다

<div class="random"> 
    <div class="alsorandom"> </div> 
</div> 

<div class="random"> 
    <div class="alsorandom"> </div> 
</div> 

여기에 내 현재 jQuery의 (2 개 클래스가 서로 이후에 추가되지 않습니다되도록 무작위 발생) 작동하지 않는다 :

$('.randomcolor, .alsorandom').each(function() { ... 

나는 어떤 도움이든 도움이된다. 고맙습니다.

+0

작동 예제는 아무 것도하지 않습니다> http://jsfiddle.net/vYL55/ – BenM

+0

어디에서'.randomcolor' 요소가 있습니까? 그 클래스가 없다면 이것은 작동하지 않을 것입니다. – jackJoe

답변

1

당신이 추가 요소는 첫 번째 요소의 직계 후손 알고 있다면, 당신이 그것을 얻기 위해 .children() 방법을 사용할 수 있습니다이 fiddle에서보세요. 이처럼 :

prevClass = classes2[Math.floor(Math.random()*classes2.length)]; 
$(this).addClass(prevClass).children('.alsorandom').addClass(prevClass); 

전체 코드는 다음과 같습니다

var classes = ['blue', 'yellow', 'lightorange', 'violet', 'green']; 
var prevClass = ""; 
$('.randomcolor').each(function() { 
    var classes2 = []; 
    for (var i = 0; i < classes.length; i++) { 
     if (classes[i] !== prevClass) { 
      classes2.push(classes[i]); 
     } 
    } 
    prevClass = classes2[Math.floor(Math.random()*classes2.length)]; 
    $(this).addClass(prevClass).children('.alsorandom').addClass(prevClass); 
}); 

를 추가 요소가 자손이지만, 반드시 직계 후손은 다음 대신 .children() 방법의 .find() 방법을 사용하는 경우 .

+0

perfekt! 고맙습니다! – benniy

0

이 대신에, 당신의 HTML을보고 :

$('.randomcolor, .alsorandom') 

이렇게 여기

$('.random, .alsorandom') 

데모 : http://jsfiddle.net/edgarinvillegas/vYL55/2/

건배

+0

예에서 잘못된 클래스를 사용합니다. 죄송합니다. 작동하지 않습니다. – benniy

0

당신의 jQuery .each하여이 작업을 수행 할 수 있습니다()와 같이 :

6,는 작업 예를

+0

mh, 나는 이것을 얻지 않는다 - 미안. 나는 2 개의 임의의 addclasses가 서로 나타나지 않으면 더 이상 작동하지 않는다는 경고와 나의 이전 기능을 본다. – benniy

관련 문제