Câu hỏi phần tử có chiều cao tối đa từ một tập hợp các phần tử


Tôi có một bộ div các yếu tố. Trong jQuery, Tôi muốn có thể tìm ra div với chiều cao tối đa và chiều cao của nó div. Ví dụ:

<div>
    <div class="panel">
      Line 1
      Line 2
    </div>
    <div class="panel">
      Line 1<br/>
      Line 2<br/>
      Line 3<br/>
      Line 4<br/>
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1
      Line 2
    </div>
</div>

Bằng cách xem xét ở trên, chúng ta biết rằng lần thứ 2 div (với 4 dòng) có chiều cao tối đa của tất cả. Làm thế nào để tôi tìm ra điều này? Ai đó có thể giúp đỡ?

Cho đến nay tôi đã cố gắng:

$("div.panel").height() trả về chiều cao của ngày 1 div.


76
2018-05-19 15:22


gốc




Các câu trả lời:


Sử dụng .map() và Math.max.

var maxHeight = Math.max.apply(null, $("div.panel").map(function ()
{
    return $(this).height();
}).get());

Nếu điều đó khó đọc, điều này có thể rõ ràng hơn:

var heights = $("div.panel").map(function ()
    {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

191
2018-05-19 15:25



Điều này tìm thấy chiều cao cao nhất nhưng không phải là tham chiếu đến phần tử thực tế. - Vincent Ramdhanie
Bạn đúng; Tôi đã không rõ ràng rằng OP muốn các yếu tố là tốt. Câu trả lời của bạn hoạt động trong trường hợp đó. - Matt Ball
@ McBall Tại sao chức năng nhận được, tôi có thể yêu cầu? Nó làm gì và mục đích của nó là gì? - chodorowicz
@chodorowicz mừng vì bạn đã hỏi. Xem câu trả lời này, dưới tiêu đề thứ hai. - Matt Ball
@MattBall Cảm ơn. Vì vậy, jQuery .map trả về mảng giống như đối tượng và nhận được .get biến nó thành mảng. Nhưng có vẻ như Math.max hoạt động dễ dàng trên cả hai loại này (chỉ được thử nghiệm trong bảng điều khiển của Chrome), vì vậy trong trường hợp này .get có vẻ không cần thiết. Hoặc là tôi sai? - chodorowicz


Html mà bạn đã đăng nên sử dụng một số <br> để thực sự có các div với chiều cao khác nhau. Như thế này:

<div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
    <div class="panel">
      Line 1<br>
      Line 2<br>
      Line 3<br>
      Line 4
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
</div>

Ngoài ra, nếu bạn muốn tham chiếu đến div với chiều cao tối đa bạn có thể làm điều này:

var highest = null;
var hi = 0;
$(".panel").each(function(){
  var h = $(this).height();
  if(h > hi){
     hi = h;
     highest = $(this);  
  }    
});
//highest now contains the div with the highest so lets highlight it
highest.css("background-color", "red");

18
2018-05-19 15:35



Hãy cẩn thận với điều này, nếu bạn không sử dụng một phương thức jQuery bên trong (như .height trong trường hợp này) thì bạn phải dereference nó, ví dụ: `$ (this) [0] .scrollHeight;` - rogerdpack


Nếu bạn muốn sử dụng lại ở nhiều nơi:

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

Sau đó, bạn có thể sử dụng:

maxHeight($("some selector"));

2
2017-09-08 11:42





function startListHeight($tag) {
  
    function setHeight(s) {
        var max = 0;
        s.each(function() {
            var h = $(this).height();
            max = Math.max(max, h);
        }).height('').height(max);
    }
  
    $(window).on('ready load resize', setHeight($tag));
}

jQuery(function($) {
    $('#list-lines').each(function() {
        startListHeight($('li', this));
    });
});
#list-lines {
    margin: 0;
    padding: 0;
}

#list-lines li {
    float: left;
    display: table;
    width: 33.3334%;
    list-style-type: none;
}

#list-lines li img {
    width: 100%;
    height: auto;
}

#list-lines::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<ul id="list-lines">
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
        <br /> Line 3
        <br /> Line 4
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
</ul>


1
2017-10-22 08:04





Thử Tìm hiểu chiều cao div và đặt chiều cao div (Tương tự như Matt được đăng nhưng sử dụng vòng lặp)


0
2018-05-19 15:26





Nếu bạn quan tâm đến việc sắp xếp hoàn toàn bằng JavaScript chuẩn hoặc không sử dụng forEach ():

var panels = document.querySelectorAll("div.panel");

// You'll need to slice the node_list before using .map()
var heights = Array.prototype.slice.call(panels).map(function (panel) {
    // return an array to hold the item and its value
    return [panel, panel.offsetHeight];
}),

// Returns a sorted array
var sortedHeights = heights.sort(function(a, b) { return a[1] > b[1]});

0
2018-03-14 21:29





ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

ul li {
  width: calc(100% / 3);
}

img {
  width: 100%;
  height: auto;
}
<ul>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
    <br> Line 3
    <br> Line 4
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
</ul>


0
2018-03-23 01:16