How to apply different css margin-top to each children in a list


Tags: jquery,html,css,jquery-selectors

Problem :

I have the following code:

function computeSetImgMargins(iD) {
 var ids = iD;
 var totalWidth = 0
 var totalHeight = 0;
 ids.children().each(function(index){
     var imgWidth = ids.children().width();
     var imgHeight = ids.children().height();
     totalWidth += imgWidth;
     totalHeight += imgHeight;
     var leftMargin = imgWidth - totalWidth;
     var topMargin = imgHeight - totalHeight;
     ids.children(index).css('margin-left',leftMargin);
     ids.children(index).css('margin-top',topMargin);
   });
}
var objLi = jquery("li", this);
computeSetImgMargins(objLi);

My Html has something like this

<div id="imgrt">
<ul id="if">
   <li><img src="../pictures/album/20-c-44.jpg" /></li>
   <li><img src="../pictures/album/20-c-44.jpg" /></li>
</ul>
</div>

I don't have separate ID's or classes for each element. I'm not sure if that would be a good idea (would be open to comments), but without using that how do I apply different margin-left and margin-top position to each <li>, and <img> elements in <ul>?

This I guess would overlap both the images.

My CSS for <ul> is the following:

#if { left: 0%; top: 0%; margin: 5px; padding: 5px; position: relative; width: 400px; height: 400px; background-color: #101010; z-index: 30; }


Solution :

In place of ids.children() use $(this). Within the each, $(this) will give you the current item in the loop.

http://jsfiddle.net/nvnTW/


    CSS Howto..

    How to manage magento CSS file with over 10,000 lines?

    How to design a Sass animation library that allows users to modify variables?

    How to wrap text in a element in IE

    How to position an image to the right of a center aligned title with HTML & CSS

    How to fix angular-strap css

    How to target the href to div

    How to center Nav Bar CSS

    How to insert database values into the template stylesheet?

    How to have proper spacing between items in the navbar regardless of word size?

    How to enlarge HTML text while keeping its center anchored at a point?

    How can I load css file in Meteor for just one page?

    Slideshow won't accept fixed height

    How to set an image when we select its sub menu

    Creating an animated image slider - how to animate and restrict multiple clicks?

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    How to remove space between list items in navigation (HTML / CSS)

    CSS: how to add white space before element's content?

    How to figure out the CSS bugs?

    PHP & CSS: How to get hover effect for each row of a table?

    How to achieve this gradient using valid HTML & CSS only

    How to attach click event to a css styled checkbox

    How to Change the hover image in CSS

    How to stop the queuing of multiple animations based on occurrence jquery

    How Do I Use Css To Select A Area Of Code

    Interface problem the right css style is not being called. How to call the right one?

    CSS: how to place controls at both extrems of a cell table

    Adding buttons to slideshow

    Browser sizing Ctrl +/- :: How to manipulate settings?

    how can I set my gradient background in css for full width and height of the page?

    How to attach CSS to my template?