2012-07-13 34 views
0

我正在使用剃刀视图在asp.net mvc 4上工作。我试图显示样式为float:left的奇数div标签,以及样式为float:right的div标签。在这里我div标签都喜欢,我怎样才能应用独立的样式为奇数和偶数div标签

<div id="content" style="padding-top:80px;"> 
    @foreach (var item in (List<System.Data.DataRow>)ViewBag.List) 
    { 
     <a href="@string.Format("Products?id={0}",item[0])"> 
     <div class="img"> 

      <table align="center" cellspacing="12"> 
       <tr> 
        <td style="text-align: center;"> 
         <b>@item[1]</b> 
        </td> 
       </tr> 
       <tr> 
        <td style="text-align: center; color: DodgerBlue; font-size: xx-large; border-top: 1px solid Gray; 
         border-bottom: 1px solid gray; font-weight: bolder;"> 
         [email protected][2] 
        </td> 
       </tr> 
       <tr> 
        <td style="text-align: center"> 
         @item[3] 
        </td> 
       </tr> 
       <tr> 
        <td style="text-align: center"> 
         No Trail period 
        </td> 
       </tr> 
       <tr> 
       <td> 
       <div class="divOuter" style="float:left;margin:4px;width:100%;height:40px;text-align:left"> 
       @foreach (var i in ProductOption.ProductOptions(Convert.ToInt32(item[0]))) 
       { 
        <div class="divInner" style="display:inline;width:50%;"><input type="checkbox" value="@i[0]" checked="checked" /><span style="line-height:20px;font-weight:bold;">@i[0]</span></div> 
       } 
       </div> 
       </td> 
       </tr> 
      </table> 
     </div></a> 
    } 
</div> 

我用了jQuery一样,

$(document).ready(function() { 
      $("div.divOuter div.divInner:odd").css("float","left"); 
      $("div.divOuter div.divInner:even").css("float", "right"); 
     }); 

我怎么能申请浮动:左奇数div标签和float:正确的甚至div标签。请指导我。

回答

2

不是设置内部div的id,而是将它们的class设置为divInner。然后将您的选择器更改为如下所示:

$(document).ready(function() { 
     $("div.divOuter .divInner:odd").css("float","left"); 
     $("div.divOuter .divInner:even").css("float", "right"); 
    }); 

ID应该在HTML文档中是唯一的。

+0

对输出没有任何影响先生。 – 2012-07-13 15:12:43

+0

适合我。请参阅http://jsfiddle.net/72Tuq/ – Jacob 2012-07-13 15:20:46

+0

请注意':even'和':odd'使用基于0的索引,因此它看起来倒退了。我交换了样式,以便它符合您期望的内容。 – Jacob 2012-07-13 15:21:29

0

您错过了很大一部分 - 不能有多个具有相同名称的ID。你可以使用一个类,然后使用选择器,它将起作用。

请看这里:http://jsfiddle.net/FMp35/3/