Как подсчитать количество пустых и используемых div, используя js?

Question

Как сказано в заголовке, я пытаюсь подсчитать количество используемых пустых div и div, используя js. Например,

<div id="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>123</div>
    <div>123</div>
</div>

Есть 6 пустых div и 2 используемых, как мне посчитать это в javascript?

edit: Большое спасибо, ребята, действительно оценил помощь :)

Answer 1

Вы можете получить дочерние элементы элемента-оболочки и использовать Array.prototype.filter , чтобы получить пустые div, а затем получить длину массива, возвращаемого фильтром. Чтобы проверить, пуст ли div, мы можем использовать метод Node.hasChildNodes () . А для подсчета непустых div мы можем вычесть количество пустых div из общего количества div внутри оболочки.

const wrapper = document.getElementById('wrapper');

const numEmptyDivs = [...wrapper.children].filter(child => !child.hasChildNodes()).length;
const numNonEmptyDivs = wrapper.children.length - numEmptyDivs;

Answer 2

В зависимости от вашего определения пустого (innerHTML, textContent, childNodes) и logi c простого наличия двух состояний, вы можете вернуть оба состояния, вызвав reduce() и передавая object как параметр accumulator, увеличивая его двоичный ключ состояния, используя Object.defineProperty().

var tResult = [...document.querySelectorAll('#wrapper > div')].reduce((a, v) => Object.defineProperty(a, +!!v.innerHTML, {value: a[+!!v.innerHTML]+1}), {0:0, 1:0})

console.log(
  'Empty: ' + tResult[0] + '\n' +
  'Not empty: ' + tResult[1]
)

<div id="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>123</div>
    <div>123</div>
</div>

Answer 3

с использованием двух селекторов. Можно получить все и пусто.

const totalDivs = document.querySelectorAll("#wrapper div").length;
const emptyCount = document.querySelectorAll("#wrapper div:empty").length;
const filledCount = totalDivs - emptyCount;

console.log({ emptyCount, filledCount });

<div id="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>123</div>
    <div>123</div>
</div>

Или с al oop с уменьшением.

const divs = document.querySelectorAll("#wrapper div")
const result =  Array.from(divs).reduce( function (o, d) {
  const key = d.innerHTML.length ? 'filledCount' : 'emptyCount';
  o[key]++;
  return o;
}, { emptyCount: 0, filledCount: 0 })
console.log(result);

<div id="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>123</div>
    <div>123</div>
</div>

Answer 4

Выберите дочерние элементы оболочки, используя document.querySelectorAll('#wrapper>*')

Вышеупомянутый возвращает список узлов. Теперь пройдите через это oop и проверьте свойство textContent каждого узла. Если он равен нулю, увеличьте счетчик на 1

В конце l oop у вас будет количество пустых div

Answer 5

const wrapper = document.getElementById('wrapper');
const empty = Array.from(wrapper.children).filter(x => !x.innerHTML).length;
const inUse = Array.from(wrapper.children).filter(x => x.innerHTML).length;
console.log('empty:' + empty + ' inUse:' + inUse);

Answer 6

Если вы хотите быть уверенным, что элемент действительно пуст (также проверяя другие HTML элементы внутри него, а не только текст), вы должны проверить атрибут innerHTML

const container = document.querySelector("#wrapper");
let emptyDivs = 0;
let notEmptyDivs = 0;
container.querySelectorAll("div").forEach(element=> 
   element.innerHTML ? notEmptyDivs++ : emptyDivs++
)

Answer 7

Вы будете перебирать каждый блок и искать блоки без текста, в этом случае общее количество увеличится.

let totalWithoutContent = 0;
let totalWithContent = 0;

document.querySelectorAll('#wrapper div').forEach(div => {
   if(div.innerText == "") totalWithContent++;
   else totalWithoutContent++;
})