jQuery로 클래스의 각 인스턴스에 무작위 CSS 추가

Question

내가해야 할 일은 세 가지 CSS 스타일 중 하나를 내 HTML에 .project_content의 모든 인스턴스에 추가하고 각 인스턴스마다 스타일을 무작위로 선택해야합니다.
float:left
float:right OR (.project_content의 폭이 계산되어 x는 계산 된 폭) 지금

margin:auto + width:x 나는이있다 : 다음과 같이

세 가지 스타일

은

<script type="text/javascript"> 
$(document).ready(function(){ 
    var floats   = ["right","left"];     
    var rand = Math.floor(Math.random()*floats.length);   
    $('.project_content').css("float", floats[rand]); 
});​​​​​​​​​​​​​ 
</script> 

이 스크립트는 나를 위해을 적용하고 있습니다. 각 인스턴스에 대해 오른쪽 또는 왼쪽을 선택하는 대신 .project_content의 ALL 인스턴스에또는 float:right을 입력하십시오.

project_content의 인스턴스마다 임의의 변수를 선택하려면 어떻게해야합니까? margin:auto + 계산 된 width을 어떻게 추가 할 수 있습니까? 정말 고마워.

Answer 1

당신은 대신 전체 세트에 대한 하나의 임의의 값으로, 세트의 각 요소에 대한 임의의 스타일을 얻을 필요가있다. 함수가 각 일치하는 요소를 호출됩니다 이후 즉, .css(propertyName, function(index, value))을 사용하여 수행 할 수 있습니다 :

$('.project_content').css("float", function() { 
    var rand = Math.floor(Math.random() * floats.length); 
    return floats[rand]; 
})​; 

DEMO.

(여러 속성 중 하나를 수정해야하기 때문에) 더 이상 css()을 사용할 수 없습니다, 믹스에 margin 및 width을 추가하려면,하지만 당신은 .each()를 사용하여 수행 할 수 있습니다

var styles = [ "left", "right", "margin" ]; 
$('.project_content').each(function() { 
    var randomStyle = styles[Math.floor(Math.random() * floats.length)]; 
    if (randomStyle == "left" || randomStyle == "right") { 
    $(this).css('float', randomStyle); 
    } else { // margin 
    $(this).css('margin', 'auto') 
      .css('width', your_calculated_width); 
    } 
})​;