在javascript或JQuery中增加css

我有'span'標籤，每個span需要增加'left'屬性10px。在javascript或JQuery中增加css

例如： -

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>

我的JavaScript寫成：

$('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; 
}

來源

2012-11-16 user1769790

而你還沒有寫一行javascript開始？ – wakooka

你想通過'click'，'hover'，'load'增加它嗎？ – Boris

@bborisovs是的，它是onload（我在設計佈局的一種） – user1769790

這裏是我會做什麼用你給的東西

$('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 
});

來源

2012-11-16 22:50:11

感謝這工作。適合我的需求。 – user1769790

不知道他爲什麼移動接受的標記。你的似乎更符合他的需求。 –

呃..不要太擔心。只是想幫助:) –

好吧，我會說你應該申請一個類的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'); 
    }); 
});

這是做到這一點的方法之一。我不知道你在分配給每個跨度的班級做什麼。但如果是爲了試圖縮進，您可以從span中刪除類，並讓通用選擇器爲您完成工作。

來源

2012-11-16 22:41:00

你比我快。但是，它是如此簡單。 –

這是假設他沒有在他的頁面上有任何其他跨度 –

你太好了，我希望他給我們至少一些東西來告訴我們他已經嘗試過了。 – wakooka

你是否使用像jquery/prototype這樣的框架工作來從html中選擇跨度？你可以使用document.getElementsByTagName（「跨」），那麼只需循環他們並增加財產（左）

來源

2012-11-16 22:43:25 telemmaite

是的，它是;和JQuery最合適;謝謝 – user1769790

使用Attribute Starts With Selector通過類來只選擇需要跨度：

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

來源

2012-11-16 22:43:25 VMAtm

在javascript或JQuery中增加css

回答

相關問題