자바 스크립트 또는 JQuery의 CSS 증가

Question

나는 'span'태그가 있고 각 span은 'left'속성을 10 픽셀 씩 증가시켜야합니다.

예 : -

CSS: 
span.cell_0  { left: 0px;  } 
span.cell_1  { left: 10px;  } 
span.cell_2  { left: 20px;  } 
HTML: 
<span class="cell_0">name</span> 
<span class="cell_1">#</span> 

내가 자바 스크립트로 작성했습니다 :

$('span').css('left', '+=10px'); 

있지만, 각 스팬

암 설계 레이아웃을 위해 노력하고 있어요; 행과 열. 행에 대한

<div class="row1"> 
<span class="cell_0">name</span> 
<span class="cell_1">#</span> 
</div> 
<div class="row2"> 
<span class="cell_0">name</span> 
<span class="cell_1">#</span> 
</div> 

CSS :

.row1, .row2, .row3, .row4{ 
font-size:12px; 
padding:5px 20px 20px 0; 
} 

Answer 1

내가 어떻게 할 것인지의 당신이 준 것과 함께

$('span.[class^="cell_"]').each(function(i,v){ // loop through each span with class that starts with cell_ 
    var num = +$(v).attr('class').split('_')[1]; // get the number from the class 
    $(v).css('left',(num * 10) + 'px') // use it to get the px 
}); 

Answer 2

좋아, 난 당신이 문제의 div의에 클래스를 적용해야 말할 것입니다 :

이

<div class="indent"> 
    <span class="cell_0">name</span> 
    <span class="cell_1">#</span> 
</div> 
<div class="indent"> 
    <span class="cell_0">name</span> 
    <span class="cell_1">#</span> 
</div> 

$('.indent').each(function(){ 
    $(this).find('span').each(function(i, v){ 
     $(this).css('left', (i * 10) + 'px'); 
    }); 
}); 

그것을 할 수있는 하나의 방법입니다 그. 나는 각 스팬에 할당 된 클래스로 무엇을하고 있는지 알지 못합니다. 그러나 들여 쓰기를 시도하는 경우 스팬에서 클래스를 제거하고 일반 선택기를 사용하여 작업을 수행 할 수 있습니다.

Answer 3

jquery/prototype과 같은 프레임 작업을 사용하여 html에서 범위를 선택하고 있습니까? 당신은 그럼 그냥 루프를 document.getElementsByTagName ('기간')를 사용할 수 있으며 (왼쪽) 속성을 증가

Answer 4

사용 Attribute Starts With Selector 클래스에만 필요 스팬을 선택합니다 :

여기

$(document).ready(function() { 
    $("[class^=cell]'").each(function(i, v){ 
     $(this).css('left', (i * 10) + 'px'); 
    });  
});