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

Question

[midarovrk]

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

Мне нужно подсчитывать 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, они потом появляются на странице.

Answer 1

[Stockholm Syndrome]

Object.keys(
  $('.qq-upload-list .qq-upload-file').get()
    .reduce((acc, curr) => ({...acc, [curr.textContent]: 1}), {})
).length;

Comments

[midarovrk]

А результат как вывести в
<div class="countfiles"></div>

[Stockholm Syndrome]

midarovrk, $('.countfiles').text(/* здесь это выражение */);

[midarovrk]

Stockholm Syndrome, так?

$('.countfiles').text(
Object.keys(
$('.qq-upload-list .qq-upload-file').get()
    .reduce((acc, curr) => ({...acc, [curr.textContent]: 1}), {})
).length;
);

[Stockholm Syndrome]

midarovrk, да
ну вот зачем спрашивать, если можно просто проверить?

[midarovrk]

Stockholm Syndrome, потому что не работает так =)

[Stockholm Syndrome]

midarovrk, уберите точку с запятой после length

[midarovrk]

Stockholm Syndrome, спасибо.

Answer 2

[0xD34F]

Кого надо посчитать: const className = 'qq-upload-file';.

Как получить элементы:

const elements = document.querySelectorAll(`.${className}`);
// или
const elements = document.getElementsByClassName(className);

Как извлечь из элемента его текстовое содержимое:

const getText = el => el.textContent;
// или
const getText = el => el.innerText;
// или (т.к., вложенных элементов нет)
const getText = el => el.innerHTML;

Как получить из коллекции элементов массив текстов:

const texts = Array.from(elements, getText);

// или

const texts = Array.prototype.map.call(elements, getText);

// или

const texts = [];
for (const n of elements) {
  texts.push(getText(n));
}

// или

const texts = [];
for (let i = 0; i < elements.length; i++) {
  texts[i] = getText(elements[i]);
}

Как посчитать количество уникальных элементов в массиве:

const uniqueCount = new Set(texts).size;

// или

const { size: uniqueCount } = new Map(texts.map(n => [ n, n ]));

// или

const [ uniqueCount ] = texts.reduce((acc, n) => {
  acc[0] += !(acc[1][n] = acc[1].hasOwnProperty(n));
  return acc;
}, [ 0, {} ]);

// или

const uniqueCount = texts.filter((n, i, a) => i === a.indexOf(n)).length;

Comments

[midarovrk]

Можно целиком код, я не понял как применить, это на что заменить?

[midarovrk]

Разобрался, спасибо =)