როგორ იპოვოთ ყველა დამალული ელემენტი გვერდზე?

CSS სელექტორებს შეიძლება გამოყენება JavaScript-თან ერთად.

ძირითადი მიდგომები:

• ** :not(:visible) პსევდოკლასი (нестანდარტული)**: მიუხედავად იმისა, რომ სტანდარტული CSS-სთვის პირდაპირი სელექტორი "არამინახევი" არ არსებობს, ზოგი ფრეიმვორკი და ბიბლიოთეკა (მაგალითად, jQuery) სთავაზობენ საკუთარ რეალიზაციებს ან შეიძლება შექმნათ მომხმარებლის ლოგიკა. ეს მიდგომა უფრო კონცეპტუალურია ახსნისთვის.
• display, visibility და opacity-ის შემოწმება: ეს ყველაზე საიმედო მეთოდია ნატიური JS-ში. დამალული ელემენტები არიან display: none, visibility: hidden ან opacity: 0 მქონე ელემენტები (თუ ისინი მშობელ ელემენტებს არ წარმოადგენენ ხილვადი შთამომავლებისთვის).

// ყველა ელემენტი გვერდზე
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

allElements.forEach(element => {
  const computedStyle = getComputedStyle(element);

  // display: none-ის შემოწმება
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // ელემენტი დამალულია, აღარ არის საჭირო შემდგომი შემოწმება
  }

  // visibility: hidden-ის შემოწმება
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // opacity: 0-ის შემოწმება
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // რთული პირობა: ვამოწმებთ, რომ ელემენტი თავად არის უხილავი opacity: 0-ის გამო
    // და რომ მას არ აქვს ხილვადი შთამომავლები (opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // დამატებითი შემოწმება მშობლის მიერ დამალვისთვის
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // ელემენტი დამალულია მშობლის მიერ
    }
    parent = parent.parentElement;
  }
});

console.log('დამალული ელემენტები:', hiddenElements);

• jQuery: jQuery ამ ამოცანას ამარტივებს :hidden პსევდოკლასის გამოყენებით:

// დამალული ელემენტების ძიება jQuery-ს გამოყენებით
const hiddenElementsJquery = $(':hidden');

console.log('დამალული ელემენტები (jQuery):', hiddenElementsJquery);

მნიშვნელოვანია: ნატიური JavaScript-ის გამოყენებისას, opacity: 0-ის შემოწმება მოითხოვს ყურადღებით ანალიზს, რათა არ ჩათვალოს მშობელი დამალულად, თუ მხოლოდ ერთი შთამომავალი აქვს opacity: 0, მაგრამ თავად მშობელი და სხვა შთამომავლები ხილვადია. ასევე, უნდა გაითვალისწინოს, რომ ელემენტი შეიძლება იყოს დამალული ზომის (სიგანე/სიმაღლე 0) ან viewport-ის გარეთ მდებარეობის გამო, მაგრამ ეს უკვე არ არის პირდაპირ CSS თვისება "დამალვა".