Как сделать высоту каждого div равной высоте с помощью JavaScript?

Question

Я пытаюсь создать объект, который будет определять наивысшую высоту набора элементов и сделать каждый элемент равным высоте самого большого.

В этом объекте я пытаюсь передать селектор методу JQuery, который находится внутри моего метода объекта. К сожалению, я не могу получить каждый элемент таким образом, и мой оператор Each не срабатывает, но объект возвращает 0 элементов.

Ниже приведен пример моего объекта:

var heightBalance = { 
 
    containerName: '', 
 
    childElements: '', 
 
    alert: function() { 
 
    var divs = $(this.childElements); 
 
    console.log(divs); 
 
    $.each(divs, function(index, value) { 
 
     console.log('working'); 
 
    }); 
 

 
    } 
 
} 
 

 
heightBalance.containerName = '#containers'; 
 
heightBalance.childElements = 'div'; 
 
heightBalance.alert();

#one { 
 
    background-color: green; 
 
    width: 50px; 
 
    height: 200px; 
 
} 
 
div { 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containers"> 
 
    <div id="one">d</div> 
 
    <div id="two"></div> 
 
    <div id="three"></div> 
 
    <div id="four"></div> 
 
    <div id="five"></div> 
 
</div>

Answer 1

Ты сценарий инициализации в голове, прежде чем divs оказаны. Переместить сценарий до конца тела, или использовать JQuery готовые функции (fiddle):

$(function() { 
    var heightBalance = { 
     containerName: '', 
     childElements: '', 
     alert: function() { 
      var divs = $(this.childElements); 
      console.log(divs); 
      $.each(divs, function (index, value) { 
       console.log('working'); 
      }); 

     } 
    } 

    heightBalance.containerName = '#containers'; 
    heightBalance.childElements = 'div'; 
    heightBalance.alert(); 
}); 

Код в этом answer дадут вам равные высоты вы хотите:

$(function() { 
    // Get an array of all element heights 
    var elementHeights = $('.features').map(function() { 
    return $(this).height(); 
    }).get(); 

    // Math.max takes a variable number of arguments 
    // `apply` is equivalent to passing each height as an argument 
    var maxHeight = Math.max.apply(null, elementHeights); 

    // Set each height to the max height 
    $('.features').height(maxHeight); 
}); 

Answer 2

В афише над состояниями, ваш код инициализируется в голове до того, как ваши элементы загрузятся. Если вы посмотрели на объект в консоли, вы увидите, что объект ссылался на корень всего вашего документа. Для дальнейшего использования, в скрипте, в разделе «Рамки и расширения», переключение второго выпадающего списка из «nowrap - in head» на «onload» может достичь того же результата, что и предыдущий ответ.

Вы определяете 2 переменные. Я предполагаю, что целью является определение контекста - heightBalance.containerName , а затем поиск этого контекста для самого высокого дочернего элемента и изменение всех детей в соответствии с этой высотой. heightBalance.childElements.

Ваша функция не использует heightBalance.containerName. поэтому $(this.childElements) просто ищет любой div на странице. в консоли вы увидите, что контейнер отображается вместе с дочерними элементами.

Вы, вероятно, хотите, чтобы изменить его на что-то больше похоже на var divs = $('#containers').find('div') или Shortform $('div', '#containers')

alert: function(){ 
     var divs = $('#containers').find('div') 
     console.log(divs); 
     $.each(divs, function(index, value){ 
     console.log('working'); 
     }); 

    } 

Answer 3

Я изменил мой немного код и получил эту работу. Спасибо всем, кто показывает мне, когда мне нужно инициализировать JQuery, чтобы получить это функционирование.

var heightBalance = { 
containerName: '', 
childElements: '', 
heightArray: [], 
calc: function(){ 
    var divs = $(this.containerName + " " + this.childElements); 
    $.each(divs, function(index, value){ 
    var innHeight = $(value).height(); ; 
    heightBalance.heightArray.push(innHeight); 
    }); 
    this.largestHeight(this.heightArray); 
}, 
largestHeight: function(data) 
{ 
    var i = data.indexOf(Math.max.apply(Math, data)); 
    $(heightBalance.childElements).height(this.heightArray[i]); 
    } 
}