Как добавить симметричные значения с JQuery

Question

У меня есть этот код:

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

Сейчас: мне нужно добавить для каждого из figures симметричного элемента, но с разной высотой и шириной. Для каждого пункта далее мне нужно удалить около 10% по ширине и высоте. Так что первый имеет 90%, а второй 80%, а третий - 70% от начального размера. Я использую следующий код, но он не работает, может ли кто-нибудь помочь?

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

Thx.

Answer 1

Вы работаете над строкой '90% 'и пытаетесь завершить математическую операцию, которая упадет. Это должно работать:

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

Также декларация var indx = 10; не является необходимым. Это значение будет переопределено внутри функции.

EDIT: Также может быть больше контейнеров. Затем код должен выглядеть следующим образом:

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

Вы не выбираете figure вам нужен этот $('figure');

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

Answer 3

Вы calulating следующей ширины и высоты вычитания indx из строки.

попробовать:

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

Answer 4

Попробуйте это:

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