/ / मैं jQuery के साथ नेस्टेड divs की ऊंचाई कैसे सेट करूं? - jquery, सीएसएस

मैं jQuery के साथ नेस्टेड divs की ऊंचाई कैसे सेट करूं? - jquery, सीएसएस

मैं एक का उपयोग कर रहा हूँ सरल jQuery समारोह तत्काल बाल टैग की ऊंचाई निर्धारित करने के लिए। मुझे नेस्टेड टैग के बाद भी इसे संशोधित करने की आवश्यकता है। उदाहरण के लिए:

<div class="row">
<div class="four columns">
<div class="panel green">
// content panel 1 200px high based on content
</div>
</div>
<div class="four columns">
<div class="panel green">
// content panel 2 250px high based on content
</div>
</div>
<div class="four columns">
<div class="panel green">
// content panel 3 150px high based on content
</div>
</div>
</div>

इस पंक्ति के लिए, सभी पैनल एक ही ऊंचाई होना चाहिए। अभी अगर मैं फोन करता हूं $(".four").equalHeights(); यह केवल पहली सामग्री पर ऊंचाई निर्धारित करेगापैनल। मुझे पैनल 1, 2 और 3 की ऊंचाइयों को पाने के लिए इसकी आवश्यकता है, फिर इस मामले में 250px में पंक्ति में सबसे बड़ी ऊंचाई तक सभी पैनलों की अधिकतम ऊंचाई पंक्ति में सेट करें।

अगर मैं कोशिश करता हूँ $("row").equalHeights() यह या तो काम नहीं करता है।

मैंने सेटिंग करने की कोशिश की है display: table-cell; हालांकि स्टाइल के लिए अतिरिक्त ओवरहेड जोड़ता है।

स्पष्टीकरण के लिए, प्रत्येक "पंक्ति" के लिए मुझे सेट करने की आवश्यकता हैसभी पैनलों की ऊंचाई। अगर मेरे पास 3 अलग-अलग पंक्तियां हैं, तो मैं नहीं चाहता कि सभी 9 पैनलों को 1 पंक्ति में मिली अधिकतम ऊंचाई पर सेट किया जाए। सभी पंक्तियां एक दूसरे से स्वतंत्र हैं।

उत्तर:

जवाब के लिए 0 № 1

डेमो: http://jsfiddle.net/aamir/GYbZ9/4/

सरल कोड यहां दिया गया है:

$(".row").each(function(){
var $panels = $(this).find(".panel");
var tallest = 0;
//find tallest
$panels.each(function () {
var ph = $(this).height();
if (ph > tallest) tallest = ph;
});
$panels.height(tallest);
});

जवाब के लिए 0 № 2

आपको कॉल करने की ज़रूरत है

$(".row").equalHeights()

यह देखो बेला: इस उदाहरण में आपको क्लिक करने की आवश्यकता है Set Height समारोह को ट्रिगर करने के लिए बटन।

मैंने यह दिखाने के लिए प्रत्येक div को ऊंचाई / रंग दिया है कि यह कैसे काम करता है।


जवाब के लिए 0 № 3

अद्यतन करें</ Strong> टिप्पणियों के आधार पर मैं वापस गया और पढ़ और देख रहा थाजिस समाधान को आप चाहते हैं, मैंने अपनी अंतिम प्लगइन योजना ली और दिखाया कि आपके और आमिर की टिप्पणी से वही चीज़ कैसे करें। उनका जवाब, मूल रूप से वही बात है जो लाइन के नीचे मेरा पहला सुझाव है:

प्लगइन के साथ:

$(".row").each(function(i) { $(this).find(".panel").equalHeights() });

उदाहरण


/>
/>

यह बहुत आसान है। बस मिलान किए गए सेट में सबसे लंबा ढूंढें, फिर उस ऊंचाई पर सबकुछ सेट करें। या यदि आप किसी दिए गए ऊंचाई का उपयोग करना चाहते हैं, तो इसका प्रयोग करें!

इस तरह:

var mh = 0;
$(".columns").each(function(i) { mh = mh > $(this).height() ? mh : $(this).height(); })
.height(mh);

उदाहरण

या, यदि आप इसे एक त्वरित और गंदे jQuery विधि के रूप में चाहते हैं:

$.fn.equalHeights = function (e) {
var mh = 0;
$(this).each(function(i) { mh = mh > $(this).height() ? mh : $(this).height(); });
return $(this).height(mh);
};

// use as:
$(".columns").equalHeights();

उदाहरण

| या |

यदि आप इसे उपयोग के लिए एक पूर्ण jQuery प्लगइन के रूप में चाहते हैं जैसे कि:

$(".four").equalHeights();  //  set all elements matching selector to height of tallest

$(".four").equalHeights(100);   //  set all elements matching selector to height of integer given

$(".four").equalHeights("200"); //  set all elements matching selector to height of string given

//  Same as top 3 but written alternatly in accordance with jQuery mark-up style
$.equalHeights(".four"); || $.equalHeights($(".four"));
$.equalHeights($(".four"), 100);
$.equalHeights($(".four"), "200");

बस निम्नलिखित पूर्ण प्लगइन जोड़ें:

(function($) {
if (!$.equalHeights) {
$.extend({
equalHeights: function() {
var args = arguments,
elm,
mh = 0;
if (args.length) {
for (x in args) {
switch (typeof args[x]) {
case "number":
mh = args[x];
break;
case "object":
if (args[x] instanceof jQuery) elm = args[x];
break;
case "string":
if (!elm) {
if ($(args[x]).length) elm = $(args[x]);
else if (!mh) if (args[x].replace(/D/g, "")) mh = args[x].replace(/D/g, "");
}
else if (!mh) if (args[x].replace(/D/g, "")) mh = args[x].replace(/D/g, "");
break;
}
}
}

if (elm instanceof jQuery) {
if (!mh) elm.each(function(i) { mh = mh > $(this).height() ? mh : $(this).height(); });
return elm.height(mh);
}
else {
return "Error: Cannot find Selector";
}
}
});
$.fn.extend({
equalHeights: function() {
var args = [$(this)];
if (arguments.length) for (x in arguments) args.push(arguments[x]);
return $.equalHeights.apply($, args);
}
});
}
})(jQuery);

उदाहरण

प्लगइन का संकलित संस्करण:

(function($){$.equalHeights||($.extend({equalHeights:function(){var a=arguments,c,b=0;if(a.length)for(x in a)switch(typeof a[x]){case "number":b=a[x];break;case "object":a[x]instanceof jQuery&&(c=a[x]);break;case "string":c?b||a[x].replace(/D/g,"")&&(b=a[x].replace(/D/g,"")):$(a[x]).length?c=$(a[x]):b||a[x].replace(/D/g,"")&&(b=a[x].replace(/D/g,""))}return c instanceof jQuery?(b||c.each(function(a){b=b>$(this).height()?b:$(this).height()}),c.height(b)):"Error: Cannot find Selector"}}),$.fn.extend({equalHeights:function(){var a=[$(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return $.equalHeights.apply($,a)}}))})(jQuery);