@midarovrk

Как посчитать только уникальные span блоки?

Добрый день. Помогите решить проблему.

Мне нужно подсчитывать span блоки, но игнорировать одинаковые, т.е. нужно считать только уникальные.

Есть такой код:

<ul class="qq-upload-list" style="display:none;">
<li class=" qq-upload-success">
<span class="qq-upload-file">Amazing Spider-Man ...) 003-000.jpg</span>
<span class="qq-upload-size" style="display: inline;">2.0MB</span>
<span class="qq-upload-failed-text">Failed</span>
</li>
<li class=" qq-upload-success">
<span class="qq-upload-file">Amazing Spider-Man ...) 003-001.jpg</span>
<span class="qq-upload-size" style="display: inline;">1.2MB</span>
<span class="qq-upload-failed-text">Failed</span>
</li>
<li class=" qq-upload-success">
<span class="qq-upload-file">Amazing Spider-Man ...) 003-002.jpg</span>
<span class="qq-upload-size" style="display: inline;">1.0MB</span>
<span class="qq-upload-failed-text">Failed</span>
</li>
<li class=" qq-upload-success">
<span class="qq-upload-file">Amazing Spider-Man ...) 003-002.jpg</span>
<span class="qq-upload-size" style="display: inline;">1.0MB</span>
<span class="qq-upload-failed-text">Failed</span>
</li>
<li class=" qq-upload-success">
<span class="qq-upload-file">Amazing Spider-Man ...) 003-003.jpg</span>
<span class="qq-upload-size" style="display: inline;">1.3MB</span>
<span class="qq-upload-failed-text">Failed</span>
</li>
</ul>


Мне нужно подсчитывать span с классом qq-upload-file

Я это делаю так:

<div class="countfiles"></div>

<script>
function countfiles() {
$(".countfiles").html($(".qq-upload-list .qq-upload-file").length);
}
setInterval(countfiles, 1000);
</script>


Скрипт каждую секунду проверяет и выводит общее число блоков с классом qq-upload-file. В данном случае выводит цифру 4, так как нашел 4 блока.
Но 2 блока имеют одинаковый текст Amazing Spider-Man ...) 003-002.jpg
Как сделать чтобы учитывались только уникальные блоки? Т.е. нужно чтобы выдало цифру 3, а не 4.

Пробовал использовать $.unique но не подходит, так как эти блоки не находятся в DOM, они потом появляются на странице.
  • Вопрос задан
  • 105 просмотров
Решения вопроса 2
@StockholmSyndrome
Object.keys(
  $('.qq-upload-list .qq-upload-file').get()
    .reduce((acc, curr) => ({...acc, [curr.textContent]: 1}), {})
).length;
Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
const uniqueCount = new Set(Array.from(
  document.querySelectorAll('.qq-upload-list .qq-upload-file'),
  n => n.innerText
)).size;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы