0

「スパン」タグがあり、各スパンで「左」プロパティを 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>

私は次のように書かれた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;
}
4

4 に答える 4

4

問題の 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');
    });
});

それはそれを行う1つの方法です。各スパンに割り当てられたクラスで何をしているのかわかりません。ただし、インデントを試みるための場合は、スパンからクラスを削除して、汎用セレクターに作業を任せることができます。

于 2012-11-16T22:41:00.217 に答える
2

これがあなたが与えたもので私がすることです

$('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-16T22:50:11.717 に答える
1

Attribute Starts With Selectorを使用して、クラスごとに必要なスパンのみを選択します。

$(document).ready(function() {
    $("[class^=cell]'").each(function(i, v){
        $(this).css('left', (i * 10) + 'px');
    });      
});
于 2012-11-16T22:43:25.487 に答える
0

HTMLからスパンを選択するためにjquery/prototypeのようなフレームワークを使用していますか? document.getElementsByTagName('span') を使用してから、それらをループしてプロパティをインクリメントすることができます (左)。

于 2012-11-16T22:43:25.403 に答える