Changing the css property against eq () ... jQuery / JavaScript

advertisements

i am trying to change the 'left' property of a group of divs dependant on their eq() value. i will show a basic code of what i'm trying to do! any help will be appreciated

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'
  });
};

please not this is not the full code i can post it if it makes more sense, the reason i need the left value to be created in jQuery is because i'd like to reuse this code in several different places and will use a different number of 'items' each time! any help is welcomed and taken onboard


You can use css function.

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

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

Note that by using $('.this'), you are selecting elements with class of this, for creating a jQuery object from this object you should code $(this).