How to add symmetric values with jquery

Question

I have this markup:

<div class="container">
   <figure></figure>   
   <figure></figure>
   <figure></figure>
</div>

Now: I need to add for each of figures a symmetric element, but with different height and width value. For each item next I need to remove about 10% in width and height. So that the first has 90%, the second 80% and the third has 70% of initial size. I'm using the following code but it does not work, can anyone help?

var inside_element = $(figure);
var indx = 10;
inside_element.each(function(indx){
    $(this).css({
        width: '90%' - indx,
        height: '90%' - indx
    });
});

Thx.

Answer 1

You working on string '90%' and trying to complete math operation, which will fall. This should work:

var inside_element = $('figure');
var indx = 10;
inside_element.each(function(indx){
    $(this).css({
        width: (90 - (10*indx)) + '%' ,
        height: (90 - (10*indx)) + '%'
    });
});

Also declaration var indx = 10; is not necessary. This value will be overrided inside function.

EDIT: Also there can be more containers. Then code should look like this:

var inside_container = $('.inside_container');
    inside_container.each( function(i) {
    var inside_element = $(this).find('figure');
    var step = 10;
    inside_element.each(function(indx){
        $(this).css({
            width: (90 - (step*indx)) + '%' ,
            height: (90 - (step*indx)) + '%'
        });
    });
});

Answer 2

You are calulating the next width and hight by substracting indx from a String.

try:

var width = 100;
var height = 100;
inside_element.each(function(indx){
    width = width - 10;
    height = height - 10;
    $(this).css({
        width: width + '%',
        height: height + '%'
    });
});

Answer 3

You are not selecting figure you need this $('figure');

var inside_element = $('figure');
inside_element.each(function(index){
    $(this).css({
        width: (90 - index * 10) +"%",
        height:(90 - index * 10) +"%"
    });
});

Answer 4

Try this:

var inside_element = $('figure');
var width = '90',
    height = '90';

inside_element.each(function(indx){
    $(this).css({
        width: width + '%',
        height: height + '%'
    });
    width = width - 10;
    height = height - 10;
});