بدست آوردن ارتفاع تگ

[idocsidocs]

چندتا تگ هست که توی سی اس اس هیچ ارتفاعی براشون تعیین نکردم. اما باید با جی کوئری ارتفاعشون رو بدست بیارم و ارتفاعشون رو برابر ارتفاع بزرگترین تگ قرار بدم.

چطور باید این کار رو انجام بدم؟

کدی که برای بدست آوردن ارتفاع استفاده می کنم:
این کد گاهی مقدار ارتفاع رو صفر برمی گردونه و گاهی ارتفاع درست رو برمی گردونه.

i=0;
$("#tab2").children(".p1").each(function(){
arr[i]=$(this).height();
i++;
});
});

[masudafsar]

از این استفاده کن. مطمئنا جواب میده.


$("document").ready(function(){
var maxHeight = 0;
$("#tab1 p").each(function(){
if($(this).height() > maxHeight){
maxHeight = $(this).height();
}
});
$("#tab1 p").css('height', maxHeight);
});


نمونه کاربردش رو هم ضمیمه کردم.

[idocsidocs]

کدها به اینصورت هستن

<div id="tab2">
<p class="p1">&nbsp;</p>
<p class="p2">&nbsp;</p>
<p class="p1">&nbsp;</p>
<p class="p2">&nbsp;</p>
</div>
تگهای با کلاس p1 عنوان هستن و تگهای با کلاس p2 توضیحات هستن

توضیحات ممکنه متن چند پاراگرافی باشه و عنوان تک خطی

می خوام ارتفاع تگهای عنوان و متن اندازه هم باشه. یعنی تگهای با کلاس p1 ارتفاعی برابر با تگهای با کلاس p2 داشته باشه. یعنی هر جفت از این تگها ارتفاع یکسانی داشته باشن.

باید چیکار کنم؟

[masudafsar]

به نظر من بهتره برای عنوان ها از h3 و برای متن ها از p استفاده کنی.

کد زیر بزرگترین عنوان و بزرگترین متن رو پیدا میکنه و در آخر ارتفاع همه رو برابر بزرگترین ها قرار میده.


$("document").ready(function(){
var maxHeight_title = 0;
var maxHeight_body = 0;
$("#tab1 h3").each(function(){
var currentHeight_title = 0;
var currentHeight_body = 0;

currentHeight_title = $(this).height();
currentHeight_body = $(this).next().height();

if(maxHeight_title < currentHeight_title){
maxHeight_title = currentHeight_title;
}

if(maxHeight_body < currentHeight_body){
maxHeight_body = currentHeight_body;
}
});

$("#tab1 h3").css('height', maxHeight_title);
$("#tab1 h3").next().css('height', maxHeight_body);
});


ممکنه بهترین جواب نباشه ولی کار میکنه.

[idocsidocs]

با کدهای جدید هم حل نشد

گاهی ارتفاع تگها برای با 0px تعیین می شه و گاهی همون ارتفاع خودشون رو بصورت اعشاری در می یاره ولی رابطه بزرگتر و کوچکتر به درستی کار نمی کنه و در نتیجه باز هم به نتیجه نمی رسم.

البته هر 5-6 بار یک دفعه درست کار می کنه !

البته فکر کنم باید تابع به این صورت باشه. چون ارتفاع هر تگ فقط باید برابر تگ بعدی خودش باشه.


$("document").ready(function(){
$("#tab1 h3").each(function(){
var currentHeight_title = 0;
var currentHeight_body = 0;
var currentHeight_tags = 0;

currentHeight_title = $(this).height();
currentHeight_body = $(this).next().height();

if(currentHeight_title < currentHeight_body){
currentHeight_tags = currentHeight_body;
}
else if(currentHeight_title > currentHeight_body){
currentHeight_tags = currentHeight_title;
}
else{
currentHeight_tags = currentHeight_body;
}
$(this).css('height', currentHeight_tags);
$(this).next().css('height', currentHeight_tags);
});
});

[masudafsar]

فایل html زیر رو ببین ساختار درستی داره؟
کد من تو این ساختار جواب درست میده.

[idocsidocs]

ساختار html درسته و تعداد تگهای h3 رو پیدا می کنه اما توی بدست آوردن و قرار دادن ارتفاع تگها خوب عمل نمی کنه

ارتفاع تگها رو گاهی صفر قرار می ده و گاهی بصورت اعشاری

حتی با این این دستور کلاسهای این تگها رو بخوبی نمایش می ده

alert($(this).attr("class")+' '+$(this).next().attr("class"))


مشکل فقط توی ارتفاع هست

[hamed_hossani]

ساخت FAQ با jQuery >مثالی برای اموزش
http://barnamenevis.org/attachment.php?attachmentid=94287&d=1351025803