Здравствуйте,
Есть 2 блока, хочется чтоб .workDataHeight блок брал высоту .work-block.
Написал следующее, подскажите пожалуйста как оптимизировать(ведь делается одно и тоже):
var workDataHeightRel = $('.workDataHeight').attr('rel');
var workBlockRel = $('.work-block').attr('rel');
if (workBlockRel = 1) {
$('.workDataHeight[rel="1"]').height($('.work-block[rel="1"]').height());
}
if(workBlockRel = 2) {
$('.workDataHeight[rel="2"]').height($('.work-block[rel="2"]').height());
}
if(workBlockRel = 3) {
$('.workDataHeight[rel="3"]').height($('.work-block[rel="3"]').height());
}
if(workBlockRel = 4) {
$('.workDataHeight[rel="4"]').height($('.work-block[rel="4"]').height());
}
if(workBlockRel = 5) {
$('.workDataHeight[rel="5"]').height($('.work-block[rel="5"]').height());
}
if(workBlockRel = 6) {
$('.workDataHeight[rel="6"]').height($('.work-block[rel="6"]').height());
}
Так только первый блок отрабатывает:
$(".workDataHeight[rel ="+ workDataHeightRel +"]").height($(".work-block[rel ="+ workBlockRel +"]").height());
Вот весь пример с html, css и js:
var workDataHeightRel = $('.workDataHeight').attr('rel');
var workBlockRel = $('.work-block').attr('rel');
if (workBlockRel = 1) {
$('.workDataHeight[rel="1"]').height($('.work-block[rel="1"]').height());
}
if(workBlockRel = 2) {
$('.workDataHeight[rel="2"]').height($('.work-block[rel="2"]').height());
}
if(workBlockRel = 3) {
$('.workDataHeight[rel="3"]').height($('.work-block[rel="3"]').height());
}
if(workBlockRel = 4) {
$('.workDataHeight[rel="4"]').height($('.work-block[rel="4"]').height());
}
if(workBlockRel = 5) {
$('.workDataHeight[rel="5"]').height($('.work-block[rel="5"]').height());
}
if(workBlockRel = 6) {
$('.workDataHeight[rel="6"]').height($('.work-block[rel="6"]').height());
}
#work{padding:50px;background-color:#eee}#work .work-block{margin-bottom:60px}#work .work-block:last-child{margin-bottom:0px}#work .work-block .workDataHeight{padding:0px !important}#work .work-block .work-data{height:100%;color:#34495e;position:relative}#work .work-block .work-data::before{content:" ";position:absolute;top:46px;left:50%;bottom:46px;width:1px;margin-left:-1.5px;background-color:#34495e}#work .work-block .work-data p{margin:0px;font-family:"RobotoBold",sans-serif}#work .work-block .work-data .data-top{position:absolute;top:20px;width:100%}#work .work-block .work-data .data-bottom{position:absolute;bottom:20px;width:100%}#work .work-block .work-text{height:100%;padding:20px 20px}#work .work-block .work-text h4{font-family:"RobotoBold",sans-serif}#work .work-block .work-text a{color:#f15324}#work .work-block .work-text p{margin:10px 0 0 0}#work .work-block-inverse .work-text{text-align:right}#brand{height:200px !important}
text
text
text
texttexttexttexttexttexttexttexttexttex
ttexttexttexttexttexttexttexttexttexttexttextt
xttexttexttexttexttexttexttexttexttexttexttexttexttext
xttexttexttexttexttexttexttexttexttexttexttexttexttext
text
text
text
text
text
text
text
text
text
texttexttexttexttexttexttexttexttexttex
ttexttexttexttexttexttexttexttexttexttexttextt
xttexttexttexttexttexttexttexttexttexttexttexttexttext
text
text
или jsfiddle
Ответ
Достаточно одной таблэтки строчки в цикле
$('.workDataHeight').each(function(){
$(this).height($(this).closest('.work-block').height());
});
closest - Ближайший подходящий предок. Т.е. Для каждого из выбранных элементов, closest() будет искать ближайший подходящий элемент из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM.
Комментариев нет:
Отправить комментарий