Как определить высоту блоков?

267

15 декабря 2016, 16:24

Есть некоторый массив блоков, который нужно перебрать с помощью jQuery и выдать высоту каждого блока в отдельности. Но console.log выдает только undefined:

$(document).ready(function() {
    for (var z = 0; z <= $(".d-col.d-col-9.p-b").length; z++) {
        console.log($(".d-col.d-col-9.p-b").height()[z]);
    }
});

В идеале скрипт должен брать высоту одного блока и присваивать другому.

Но ошибка уже на этом этапе:

$(function() {
    $(".d-col.d-col-9.p-b").each(function() {
        var z = $(this).height();
        $(".d-col.d-col-3.d-tac").css({
            height: z
        });
    });
});

Нужно присвоение высоты полученной у первого элемента его соседнему элементу. И так для всех пар блоков.

HTML:

<div>
    <div class="d-col d-col-9 p-b"></div>
    <div class="d-col d-col-3 d-tac"></div>
</div>
<div>
    <div class="d-col d-col-9 p-b"></div>
    <div class="d-col d-col-3 d-tac"></div>
</div>
<div>
    <div class="d-col d-col-9 p-b"></div>
    <div class="d-col d-col-3 d-tac"></div>
</div>
...

Answer 1

Предположу, что вы не знаете про each, поэтому вот вам пример. Пробовали так?

$(function(){
    $(".d-col.d-col-9.p-b").each(function(){
        console.log($(this).height());
    });
});

Ответ на дополнение:

Проходите each по родителям пар. Вам необходимо как-то обозвать этих родителей, я назвал .parent

Ещете через find() первый див и берете высоту в переменную. Затем, ищете второй элемент и присваиваете ее.

$(function(){
    $(".parent").each(function(){
        var z = $(this).find('.d-col.d-col-9.p-b').height();
        $(this).find('.d-col.d-col-3.d-tac').css({
            height: z
        });
    });
});

Answer 2

Вариант с .each() и .siblings():

$(function(){ 
    $(".d-col.d-col-9.p-b").each(function() { 
        var height = $(this).height(); 
        $(this).siblings('.d-col.d-col-3.d-tac').css({ height: height }); 
    }); 
});

div { 
    border: 1px solid; 
    display: inline-block; 
}

<div> 
    <div class="d-col d-col-9 p-b" style="height: 100px">1</div> 
    <div class="d-col d-col-3 d-tac">2</div> 
</div> 
<div> 
    <div class="d-col d-col-9 p-b" style="height: 200px">1</div> 
    <div class="d-col d-col-3 d-tac">2</div> 
</div> 
<div> 
    <div class="d-col d-col-9 p-b" style="height: 300px">1</div> 
    <div class="d-col d-col-3 d-tac">2</div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

покажите код html

может ошибка тут

".d-col.d-col-9.p-b" => ".d-col .d-col-9 .p-b"

$(document).ready(function(){
    for(var z=0; z<= $(".d-col .d-col-9 .p-b").length; z++){
      console.log($(".d-col .d-col-9 .p-b").height()[z]);
    }
  });