jquery - 通过jquery为多个div设置css left？

Question

嗨，我想在 % 中为多个 div 应用 css left 属性，我该怎么做。我已经尝试过下面的代码

HTML

<div class="inner-nav blue" rel="blue"> 
    <a href="#" style="display: block; left: 0%;">
       Text1 <br>
    </a>
</div>
<div class="inner-nav blue" rel="blue"> 
   <a href="#" style="display: block; left: 0%;">
       Text2 <br>
   </a>
</div>
<div class="inner-nav blue" rel="blue"> 
   <a href="#" style="display: block; left: 0%;">
      Text3 <br>
   </a>
</div>
<div class="inner-nav blue" rel="blue"> 
   <a href="#" style="display: block; left: 0%;">
      Text4 <br>
   </a>
</div>

在 JS 中

$(".inner-nav").each(function(){                                                       
      $(this).find("a:first").css("left", function( index ) {
         var f= index*25;
             f=f+"%";                                                                    
        return  f;
      });         
});

Answer 1

我认为您的问题是 anchor 索引始终为 0，因此 0% 应用于每个 anchor ，因此您可以尝试以下操作:

$(".inner-nav").each(function () {
  var idx = $(this).index(); // get the div's index
  $(this).find("a:first").css("left", function (index) {
    var f = idx * 25; // and use it here.
    f = f + "%";
    return f;
  });
});

Fiddle

<小时/>

为了简化这一点，您可以使用它:

$(".inner-nav").each(function (idx) {
    $(this).find("a:first").css("left", idx * 25 + "%");
});