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.

Kasyx · Accepted Answer · 2013-05-16T12:18:18.157

6

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

edited May 16 '13 at 12:18

answered May 16 '13 at 11:30

Kasyx

3,170
21
32

1

You are missing quotes - $("figure"); – GEMI May 16 '13 at 11:32
1

You can leave off the declaration of indx, it's already passed in the .each() callback. – Ja͢ck May 16 '13 at 11:37
ok, this work perfectly, but if i will have more than one main containers this action will be execute for every figure since first to last, how to calculate it for only parent wrapper area – Lukas May 16 '13 at 11:41
Then you have to update your selector. For example put wrapper id on container, then call: `var inside_element = $('#wrapper figure');` – Kasyx May 16 '13 at 11:43
i have this and still not working `var inside_container = $('.inside_container'), inside_element = inside_container.find('.element_inside');` – Lukas May 16 '13 at 11:47
Is `.element_inside` same element as `figure` in this question? – Kasyx May 16 '13 at 11:51
yeap this is the same element – Lukas May 16 '13 at 11:51
The probably problem lays on simultaneous declaration. Try: `var inside_container = $('.inside_container'); var inside_element = inside_container.find('.element_inside');` – Kasyx May 16 '13 at 11:55
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30057/discussion-between-djlukas777-and-kasyx) – Lukas May 16 '13 at 11:57

Adil Shaikh · Answer 2 · 2013-05-16T11:38:36.937

1

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) +"%"
    });
});

edited May 16 '13 at 11:38

answered May 16 '13 at 11:33

Adil Shaikh

44,509
17
89
111

score 1 · Answer 3 · answered May 16 '13 at 11:33

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

Kilian Stinson · Answer 4 · 2013-05-16T11:38:55.970

1

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

edited May 16 '13 at 11:38

answered May 16 '13 at 11:33

Kilian Stinson

2,376
28
33

Your answer is very rushed. You are missing % – GEMI May 16 '13 at 11:36
Ups, I was thinking in pixels, that's why I left that out – Kilian Stinson May 16 '13 at 11:39
The above solution using the index parameter is more clever anyway – Kilian Stinson May 16 '13 at 11:41

How to add symmetric values with jquery

4 Answers4