Jak sprawdzić funkcją, czy divy są puste

0

Mam przykładowo kilka divów:

<body>
  <div class="l" id="d1"></div>
  <div class="l" id="d2">abc</div>
  <div class="l" id="d3"></div>
</body>

i chciałbym funkcją w js sprawdzić, czy są jakieś puste divy w tej grupie

function sprawdz() {
  for(let k=0; k<2; k++) {
    if (document.getElementById(`d${k}`).//?? co tutaj wpisac)
    return costam
  }
}

Proszę o pomoc

2

Możesz sprawdzić, czy element jest pusty porównując przykładowo długość innerHTML

const elements = document.querySelectorAll('[id^="d"]'); // Selektor pobierze wszystkie znaczniki, które posiadają atrybut id zaczynający się na literę "d"

for (const element of elements) {
  if (!element.innerHTML.length) {
    // element jest pusty
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Istnieje też pseudoklasa :empty

const elements = document.querySelectorAll('[id^="d"]:empty');

if (elements.length) {
  // Warunek jest prawdziwy, czyli istnieje pusty element
}
1
wekkiotr napisał(a):

Mam przykładowo kilka divów:

<body>
  <div class="l" id="d1"></div>
  <div class="l" id="d2">abc</div>
  <div class="l" id="d3"></div>
</body>

i chciałbym funkcją w js sprawdzić, czy są jakieś puste divy w tej grupie

Istnieje wiele sposobów, żeby to sprawdzić:

  • Selektorem CSS (np :empty)
  • Sprawdzić ilość dzieci (np childNodes.length)
  • Sprawdzić wewnętrzną treść HTML (np. innerHTML)
  • Sprawdzić czy element jest TextNode'm.

Wszystkie te sposoby są tożsame ze sobą.

0

Gotowa funkcja korzystająca z DOM:

function jestpusty (elem) {
  if (elem.nodeType == 1) {
    // Element
    return elem.childNodes.length == 0;
  }
  if (elem.nodeType == 3) {
    // Węzeł tekstowy
    return elem.nodeValue.length == 0;
  }
  // Jakiś dziwny węzeł. Załóżmy, że niepusty.
  return false;
}
0

Dziękuję

1 użytkowników online, w tym zalogowanych: 0, gości: 1