JQuery簡單添加類不工作

 <div class="newstitle"> 
      <ul class="newstitle"> 
       @foreach (var item in Model.Content) 
       { 
        if (item.Value != null) 
        { 
        <li> 
          <div class="newstitle_title">@item.Key.Name</div> 
         </li> 
        } 
       } 
      </ul> 
    </div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.newstitle li:nth-child(odd)').addClass('last'); 
}); 
</script>

我有這段代碼，我一直在嘗試運行，它打破了CSS。
Broken CSS JQuery簡單添加類不工作

但是，它應該是像下面，請參閱圖像之間的間距：
enter image description here

我是如何解決這一問題？如果你看到div和ul都有相同的類名。

這是生成的html應該是什麼：

<div class="newstitle"> 
    <ul class="newstitle"> 
     <li>image</li> 
     <li>image</li> 
     <li>image</li> 
     <li class="last">image</li> 
     <li>image</li> 
     <li>image</li> 
     <li>image</li> 
     <li class="last">image</li> 
     <li>image</li> 
     <li>image</li> 
     <li>image</li> 
     <li class="last">image</li> 
    </ul> 
    </div>

這裏是CSS：

.newstitle {width:600px;overflow:hidden;margin:15px auto;} 
.newstitle li {float:left;width:140px;height:170px;overflow:hidden;margin:0px 13px 0px 0px;display:inline;position:relative;} 
.newstitle .last {float:left;width:140px;height:170px;overflow:hidden;margin:0px 0px 0px 0px;display:inline;position:relative;}

來源

2012-05-08 DarthVader

你需要更好的類名。 – JakeParis

試試這個：

$('li', 'ul.newstitle').filter(function() {return $(this).index()%4===0}).addClass('last');

FIDDLE

來源

2012-05-08 02:22:11 adeneo

而'.last'應該做的css也會有幫助。 – JakeParis

這讓新行 – DarthVader

@JMCCreative - 是可以，但我猜想這是多爲圖像之間設置餘量，但什麼樣的圖像，所有我看到的是一些非渲染模式？ – adeneo

怎麼樣小號omething這樣

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $li = $('ul.newstitle li'), 
      y = 0; 
     for (var i=0, n = $li.length; i < n; i++) { 
      if (y++ === 3) { 
       $($li[i]).addClass("last"); 
       y = 0; 
      } 
     } 
    }); 
</script>

希望它能有助於

來源

2012-05-08 02:45:31

JQuery簡單添加類不工作

回答

相關問題