jquery ( each 和 eq ) 在 switch 中一起使用答案

【问题标题】：jquery ( each and eq ) usage together in switchjquery ( each 和 eq ) 在 switch 中一起使用
【发布时间】：2012-07-01 11:25:54
【问题描述】：

问题1：我正在尝试使用 eq() 将相同分类的 div 元素的 css 操作到它们的顺序，但我无法访问 eq() 值。

问题2：用 switch 方法试过这个。有没有办法用更少的代码（比如 for 循环）来完成这个进度？

this is DEMO

HTML

<div id="a" class="ele">0</div>
<div id="b" class="ele">1</div>
<div id="c" class="ele">2</div>

jQuery

$('.ele').each(function() {
var eleH = 100;
var add = 10;

 $('.ele').eq(X); //trying to get value here

 switch(X) {
  case 0:
    $('.ele').css({'height': (eleH + add) + 'px'}); // #a { height:110px}
    break;
  case 1:
    $('.ele').css({'height': (eleH + (add*2)) + 'px'}); // #b { height:120px}
    break;
  case 2:
    $('.ele').css({'height': (eleH + (add*3)) + 'px'}); // #c { height:130px}
    break;
 }

});

【问题讨论】：

标签： jquery indexing each

【解决方案1】：

检查这个http://jsfiddle.net/Aw39W/4/

你没有为 X 和项目赋值

$('.ele').each(function(X) {
    var eleH = 100;
    var add = 10;
    
    $('.ele').eq(X); //trying to get value here

    switch(X) {
      case 0:
        $(this).css({'height': (eleH + add) + 'px'}); // #a { height:110px}
        break;
      case 1:
        $(this).css({'height': (eleH + (add*2)) + 'px'}); // #b { height:120px}
        break;
      case 2:
        $(this).css({'height': (eleH + (add*3)) + 'px'}); // #c { height:130px}
        break;
    }

});

【讨论】：

【解决方案2】：

不太确定你想在这里实现什么，因为你似乎不是在元素本身上设置高度，而是在其他元素上设置高度，project。快速连续设置和覆盖它的高度 3 次，看起来就像只发生了最后的循环迭代。

无论如何，从理论上讲，您的代码可以像这样优化。请记住，each() 传递了一个参数，表示正在处理的元素的索引。

var height = 100, add = 10;
$('.ele').each(index) {
    project.css({height: height + (add * index)});
});

还要注意，我在循环之外声明维度变量 - 无需继续重新定义这些。

【讨论】：

我忘了声明 var project = $('.ele') ，但我最大的错误是没有使用 $(this)

【解决方案3】：

我不确定你想做什么，但如果你想根据 CSS 的位置改变它的属性，你可以这样做：

$('.ele').each(function(i) {
    $(this).css('height', 100 + (10*i));
});

这是工作版本：http://jsfiddle.net/Aw39W/6/

【讨论】：