PDA

View Full Version : راهنمایی در مورد نمایش پیام در صورت خالی بودن یک ul



arasdesign
دوشنبه 30 بهمن 1391, 17:52 عصر
سلام دوستان یه سوالی منو مشغول کرده به خودش اونم اینه که چطوری می تونم یه پیام نمایش بدم وقتی محتویات داخل یک<ul></ul> خالی باشه یعنی هیچ آیتمی توش نباشه
یه پیام مثل این لیست خالی است اگر راهنمایی کنید خیلی خوشحال میشم منتظر راهنمایی هاتون هستم

mehdi.mousavi
سه شنبه 01 اسفند 1391, 07:40 صبح
سلام دوستان یه سوالی منو مشغول کرده به خودش اونم اینه که چطوری می تونم یه پیام نمایش بدم وقتی محتویات داخل یک<ul></ul> خالی باشه یعنی هیچ آیتمی توش نباشه یه پیام مثل این لیست خالی است اگر راهنمایی کنید خیلی خوشحال میشم منتظر راهنمایی هاتون هستم

سلام.
کافیه تا با استفاده از Empty Pseudo Element و کمی CSS اینکارو انجام بدیم. فرض کنید HTML امون این باشه:

<ul id="myList"></ul>

در این صورت CSS زیر، هنگام خالی بودن لیست پیام مورد نظر رو نشون میده:

#myList:empty {
background:#f00;
}
#myList:empty:after {
content:'The list is empty';
width: 300px;
height:100px;
display:block;
color: #fff;
}

لطفا دقت کنید که من فقط اینجا ایده ای رو مطرح کردم... بسته به شرایط ممکن هستش نیاز باشه تا با استفاده از JavaScript همین کارو انجام بدید.
برای اینکار، باید تابعی بنویسید که تشخیص بده Element مورد نظر خالی هستش یا نه. این تابع در jQuery بدین شکل نوشته شده:

function isEmpty(elem) {
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
if ( elem.nodeName > "@" || elem.nodeType === 3 /*text*/ || elem.nodeType === 4 /*cdata*/ ) {
return false;
}
}
return true;
}

بدین ترتیب می تونید با استفاده از تابع فوق تشخیص بدید که Element مورد نظر خالی هستش یا خبر، سپس بسته به شرایط با JavaScript عمل مورد نظر رو انجام بدید...

موفق باشید.