सवाल तत्वों के एक सेट से अधिकतम ऊंचाई के साथ तत्व


मेरे पास एक सेट है div तत्वों। में jQuery, मैं यह पता लगाने में सक्षम होना चाहता हूं div अधिकतम ऊंचाई और इसकी ऊंचाई के साथ भी div। उदाहरण के लिए:

<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>

उपरोक्त को देखकर, हम जानते हैं कि दूसरा div (4 लाइनों के साथ) की अधिकतम ऊंचाई है। मैं इसे कैसे ढूंढूं? क्या कोई मदद कर सकता है?

अब तक मैंने कोशिश की है:

$("div.panel").height() जो 1 की ऊंचाई देता है div


76
2018-05-19 15:22


मूल




जवाब:


उपयोग .map() तथा Math.max

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

अगर यह पढ़ने में भ्रमित है, तो यह स्पष्ट हो सकता है:

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

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

191
2018-05-19 15:25



यह उच्चतम ऊंचाई पाता है लेकिन वास्तविक तत्व का संदर्भ नहीं है। - Vincent Ramdhanie
आप सही हे; मैं स्पष्ट नहीं था कि ओपी तत्व भी चाहता है। आपका जवाब उस मामले में काम करता है। - Matt Ball
@MattBall क्यों मिलते हैं, क्या मैं पूछ सकता हूं? यह क्या करता है और इसका उद्देश्य क्या है? - chodorowicz
@chodorowicz खुशी तुमने पूछा। देख यह जवाब, दूसरे शीर्षक के तहत। - Matt Ball
@ मैटबॉल धन्यवाद। तो jQuery। मैप रिटर्न सरणी जैसी वस्तु और get .get इसे सरणी में बदल देता है। लेकिन ऐसा लगता है कि Math.max इन दोनों प्रकारों (बस क्रोम कंसोल में परीक्षण किया गया) पर आसानी से काम करता है, इसलिए इस मामले में .get अनावश्यक लगता है। या मैं गलत हूँ? - chodorowicz


आपके द्वारा पोस्ट किया गया HTML कुछ उपयोग करना चाहिए <br> वास्तव में अलग ऊंचाई के साथ divs है। इस कदर:

<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>

इसके अलावा, यदि आप अधिकतम ऊंचाई के साथ div का संदर्भ चाहते हैं तो आप यह कर सकते हैं:

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



इस के साथ सावधान रहें, अगर आप अंदर एक jQuery विधि का उपयोग नहीं करते हैं (जैसे .height इस मामले में) तो आपको इसे अव्यवस्थित करना होगा, पूर्व: `$ (यह) [0] .scrollHeight;` - rogerdpack


यदि आप कई स्थानों पर पुन: उपयोग करना चाहते हैं:

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

फिर आप इसका उपयोग कर सकते हैं:

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





प्रयत्न Divs ऊंचाई खोजें और div ऊंचाई सेट करें (एक मैट के समान पोस्ट किया गया लेकिन एक लूप का उपयोग कर)


0
2018-05-19 15:26





यदि आप पूरी तरह से मानक जावास्क्रिप्ट में सॉर्ट करने में रुचि रखते हैं, या बिना () के उपयोग किए:

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