jQuery 또는 CSS를 사용하여 그룹의 모든 요소를 ​​동일한 높이로 만드는 방법은 무엇입니까?

jQuery 또는 CSS를 사용하여 모든 요소 중 가장 높은 요소 찾기

질문:

jQuery 또는 CSS를 사용하여 어떻게 만들 수 있나요? 요소 그룹(DIV) 중 가장 높은 것을 결정하고 모두 동일하게 설정합니다. 높이?

jQuery를 사용한 솔루션:

1. 루프를 활용하여 각 요소를 반복하고 높이를 비교하여 가장 높은 요소를 식별합니다.
2. 가장 높은 요소의 높이와 일치하도록 나머지 요소의 높이를 설정합니다. element.

$(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
});

버전 2(함수형 프로그래밍을 사용하는 클리너):

$(document).ready(function() {
  var maxHeight = Math.max.apply(null, $('.features').map(function() {
    return $(this).height();
  }).get());

  $('.features').height(maxHeight);
});

Vanilla JavaScript를 사용하는 솔루션(포함되지 않음) jQuery):

var elements = document.getElementsByClassName('features');

var maxHeight = Math.max.apply(null, Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
}));

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});

ES6 사용:

const elements = document.getElementsByClassName('features');

const maxHeight = Math.max(...Array.from(elements).map(el => el.clientHeight));

elements.forEach(el => el.style.height = `${maxHeight}px`);

결론:

이러한 방법은 효과적으로 jQuery, 바닐라 JavaScript를 사용하여 내용에 관계없이 DIV 세트의 높이가 동일한지 확인합니다. 또는 ES6.

위 내용은 jQuery 또는 CSS를 사용하여 그룹의 모든 요소를 ​​동일한 높이로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!