হিডেন সিলেক্টর

সিলেক্টর :hidden পৃষ্ঠার সমস্ত এমন এলিমেন্ট নির্বাচন করে, যেগুলো লুকানো। visibility: hidden বা opacity: 0 সহ এলিমেন্টগুলো দৃশ্যমান হিসাবে বিবেচিত হয়, কারণ সেগুলো লেআউটে জায়গা দখল করে। বিভিন্ন কারণে এলিমেন্টগুলো অদৃশ্য হিসাবে বিবেচিত হতে পারে: CSS প্রপার্টি display-এর মান - none, অথবা এগুলো এমন এলিমেন্ট যেগুলোর type="hidden" অ্যাট্রিবিউট আছে, অথবা তাদের উচ্চতা বা প্রস্থ 0-এ সেট করা আছে, অথবা তাদের প্যারেন্ট এলিমেন্ট লুকানো। যেহেতু :hidden CSS স্পেসিফিকেশনের অংশ নয়, তাই আধুনিক ব্রাউজারে পারফরম্যান্স উন্নত করার জন্য প্রথমে খাঁটি CSS সিলেক্টর ব্যবহার করে এলিমেন্ট ফিল্টার করা ভাল, তারপর .filter(':hidden') অ্যাপ্লাই করুন। অন্য মেথড ব্যবহার করে, যেমন ক্লাস ব্যবহার করে, এলিমেন্টের দৃশ্যমানতা ট্র্যাক করা বেশি ভাল পারফরম্যান্স দিতে পারে।

সিনট্যাক্স

এভাবেই আমরা লুকানো এলিমেন্ট নির্বাচন করি:

javascript$(':hidden');

উদাহরণ

চলুন #test বাটনে ক্লিক করে অদৃশ্য বর্গক্ষেত্রগুলো দেখাই:

html<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('#test').click(function() {
  $('div:hidden').show('slow');
});

আরও দেখুন