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

这是一种方法。我不知道您对分配给每个跨度的类做了什么。但如果是为了尝试缩进，您可以从 span 中删除类，让通用选择器为您完成工作。

于 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

您是否使用像 jquery/prototype 这样的框架来从 html 中选择跨度？您可以只使用 document.getElementsByTagName('span') 然后循环它们并增加属性（左）

于 2012-11-16T22:43:25.403 回答