相对于eq（）更改CSS属性... jQuery / JavaScript

Question

相对于eq（）更改CSS属性... jQuery / JavaScript

3

我正试图根据它们的eq()值改变一组div元素的'left'属性。下面是一个基本代码示例，欢迎提供任何帮助。

HTML:

<html>
<body>
<div class"item-holder"></div>
  <div class"item item-one"></div>
  <div class"item item-one"></div>
  <div class"item item-one"></div>
  <div class"item item-one"></div>
</div>
</body>
</html>

CSS（层叠样式表）：

.item-holder {
position:relative;
width:100px;
}
.item {
position:absolute;
width:25px;
float:left;
}

jQuery：

$(document).ready(){
var itemWidth = $('.item-holder').width()/$('.item').size();
  $('.item').css({
    'left':$('.this').eq()*itemWidth+'px'
  });
};

请注意，这不是完整的代码，如果有必要，我可以发布它。我需要在jQuery中创建左侧值的原因是因为我想在几个不同的地方重复使用这段代码，并且每次会使用不同数量的“items”！欢迎并接受任何帮助。

- allouis

你有一个叫做"this"的类吗？ - ron tornambe

2个回答

2

您可以使用 css 函数。

.css( propertyName, function(index, value) )

$('.item').css('left', function(ind, v){
    return (ind * itemWidth) + 'px'
})

请注意，使用$('.this')时，您正在选择类为this的元素，若要从this对象创建一个jQuery对象，您应该编写$(this)。

- Ram

啊，是的，我知道了，只是一个愚蠢的错误！function(ind, v){}是标准的东西还是由我/你创建的参数？非常感谢！另外，您知道哪种处理方式更合适或正确吗？您的还是@dystroy的？谢谢！ - allouis

哎呀，我刚意识到那是一个非常愚蠢的问题，我的错。谢谢你的帮助！ - allouis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denys Séguret · Accepted Answer

您似乎需要使用 index 这个函数来实现您的需求：

$('.item').each(function(){
    $(this).css({
       'left':$(this).index()*itemWidth+'px'
    });
});

请注意，您的代码中有一些错误：

您可能不想关闭第一个div并让它为空
设置类时，请勿忘记使用=运算符

演示