Как посчитать элементы div внутки родительских и вывести количество дочерних в определенную строку?

Question

[neytan]

Добрый день. Есть html страница, на ней находятся div-элементы с классом delivery-table-wrap, в которых лежат дочерние div с классом delivery-table-item. Как мне можно посчитать количество delivery-table-item с data-status="Ошибка" внутри каждого родителя delivery-table-wrap и вывести для каждой delivery-table-wrap в div с классом error-count. Т.е у нас будет 3 таких значения. Пробовал сделать сам, но у меня считает все data-status="Ошибка" на странице, а не для каждой delivery-table-wrap отдельно:

<div class="some-class">
	<div class="error-block">
		<div class="error-txt">Количество ошибок:</div>
		<div class="error-count">?</div>
	</div>
	<div class="delivery-table-wrap">
		<div class="container">
			<div class="delivery-table-item" data-status="Ошибка">Строка 1</div>
			<div class="delivery-table-item" data-status="Отправлено">Строка 1</div>
			<div class="delivery-table-item" data-status="Ошибка">Строка 1</div>
			<div class="delivery-table-item" data-status="Принято">Строка 1</div>
			<div class="delivery-table-item" data-status="Принято">Строка 1</div>
		</div>
	</div>
</div>
<div class="some-class">
	<div class="error-block">
		<div class="error-txt">Количество ошибок:</div>
		<div class="error-count">?</div>
	</div>
	<div class="delivery-table-wrap">
		<div class="container">
			<div class="delivery-table-item" data-status="Ошибка">Строка 1</div>
			<div class="delivery-table-item" data-status="Отправлено">Строка 1</div>
			<div class="delivery-table-item" data-status="Ошибка">Строка 1</div>
		</div>
	</div>
</div>
<div class="some-class">
	<div class="error-block">
		<div class="error-txt">Количество ошибок:</div>
		<div class="error-count">?</div>
	</div>
	<div class="delivery-table-wrap">
		<div class="container">
			<div class="delivery-table-item" data-status="Ошибка">Строка 1</div>
			<div class="delivery-table-item" data-status="Ошибка">Строка 1</div>
			<div class="delivery-table-item" data-status="Принято">Строка 1</div>
			<div class="delivery-table-item" data-status="Принято">Строка 1</div>
		</div>
	</div>
</div>

var errorLine = $('.delivery-table-wrap').find('.delivery-table-item[data-status="Ошибка"]').length;
  $('.delivery-table-wrap').prev('.error-block').find('.error-count').text(errorLine);

Answer 1

[twobomb]

document.querySelectorAll(".some-class").forEach(cont=>{
	cont.querySelector(".error-count").innerHTML = Array.from(cont.querySelectorAll(".delivery-table-item")).filter(e=>e.getAttribute("data-status")=="Ошибка").length;
});

Или на jquery

$(".some-class").each((i,el)=>{
	$(el).find(".error-count").html($(el).find(".delivery-table-item[data-status=Ошибка]").length);
})