Как сделать динамический счетчик видимых элементов одного css класса jquery?

Question

[Dennis]

Задача сделать счетчик видимых элементов страницы, которые имеют одинаковый css класс.
Вывел изначально видимые элементы следующим образом:

var $count = $('.someclass:visible').length;
      $('.counter').append($count);

Но не получается изменять счетчик при появлении новых элементов на странице.

Answer 1

[Kerm]

Твой код нужно поместить в функцию и вызывать функцию всякий раз при появлении новых элементов на странице.

Comments

[Dennis]

так и сделал, но в счетчике итог не суммируется а добавляется новое число, например изначально было (4) потом (45), (456), (4567) и т.д. Подскажите, пожалуйста, как правильно оформить?

[Kerm]

Dennis, в смысле не суммируется? Вот у тебя было 10 элементов, у тебя скажем аяксом добавилось еще 10 и вызвалась снова эта функция, она тебе уже напишет 20 элементов на странице.

Используй не Append, а text(20);

[Maxim Kirshin]

при появлении новых:
$('.counter').html($count);

[Dennis]

Maxim Kirshin, огромное спасибо!!!!!! Как я могу вам карму повысить?

[Kerm]

Dennis, ну вообще то я написал нужный ответ ранее, да и html стоит использовать только если Вы что-то кроме текста и цифр будите в .counter заносить, для всего остального достаточно будет text()

[Dennis]

Огромное спасибо, всем!!!

[Kerm]

Dennis, да и вообще не обязательно новую переменную создавать, можно написать вот так:

$('.counter').text($('.someclass:visible').length);

Answer 2

[Сергей c0re]

поиск: DOM change event -> https://en.wikipedia.org/wiki/DOM_events

Mutation : DOMAttrModified

так же найдено в поиске:
jsfiddle.net/doktormolle/yQu8v

модифицируем, смотрим:
jsfiddle.net/tp2zxhn9

событие DOMAttrModified отрабатывет при смене класса.

далее...



UPD:
событие на вставку - DOMNodeInserted
и почти на все изменения - DOMSubtreeModified

посмотрите/измените jsfiddle.net/tp2zxhn9