Как в скрипте указать class с любой цифрой на конце?

Как указать class с любой цифрой на конце или их перечислить?

$(document).on('click', function(e) {   if (!$(e.target).closest(".filter").length) {     $('.filter-block').hide();    }   e.stopPropagation(); });

в данном скрипте мне нужно указать class filter-block с любой цифрой на конце или их перечислить. Т.е нужно чтобы он взаимодействовал с filter-block, filter-block2, filter-block3, filter-block4, filter-block5 и т.д

Дополнительно:

https://doka.guide/css/attribute-selector/

[class^=filter-block]

$(document).on('click', function(e) {   if (!$(e.target).closest(".filter").length) {     $('.filter-block').hide();    }   e.stopPropagation(); });  $(document).on('click', function(e) {   if (!$(e.target).closest(".filter2").length) {     $('.filter-block2').hide();    }   e.stopPropagation(); });  $(document).on('click', function(e) {   if (!$(e.target).closest(".filter3").length) {     $('.filter-block3').hide();    }   e.stopPropagation(); });  $(document).on('click', function(e) {   if (!$(e.target).closest(".filter4").length) {     $('.filter-block4').hide();    }   e.stopPropagation(); });  $(document).on('click', function(e) {   if (!$(e.target).closest(".filter5").length) {     $('.filter-block5').hide();    }   e.stopPropagation(); });

Правильнее будет изменить принцип, а не подстраиваться. Я так понимаю, нужно закрыть все блоки, кроме того, по которому кликнули?

<div class="filter" data-id="1"> <div class="filter-block" data-target="1">  <div class="filter" data-id="2"> <div class="filter-block" data-target="2">  <div class="filter" data-id="3"> <div class="filter-block" data-target="3">

$(document).on('click', function(e) {   let $f = $(e.target).closest(".filter");   if ($f.length) {     let id = $f.data('id');     $('.filter-block:not([data-target="'+id+'"])').hide();    }   e.stopPropagation(); });

• Да всё верно вы меня поняли, только при таком методе при клике в не блоков они остаются открытыми, т.е чтобы закрылся блок нужно по немуже и кликнуть
• Александр, ну допишите условие

  $(document).on('click', function(e) { let $f = $(e.target).closest(".filter"); if ($f.length) { // Закрыть все кроме let id = $f.data('id'); $('.filter-block:not([data-target="'+id+'"])').hide(); } else { // закрыть все $('.filter-block').hide(); } e.stopPropagation(); });

  $(document).on('click', function(e) { let $f = $(e.target).closest(".filter"); if ($f.length) { // Закрыть все кроме let id = $f.data('id'); $('.filter-block:not([data-target="'+id+'"])').hide(); } else { // закрыть все $('.filter-block').hide(); } e.stopPropagation(); });

• Сергей delphinpro, Огромное спасибо!

Ответы:

Можно сделать выборку по классам:

let items = document.querySelectorAll("[class^='filter-block']") let items.forEeach(item => {     // ... });

[class^='filter-block'] означает, что вы будете делать выборку по всем элементам, у которых значение указанного аттрибута (В нашем случае, мы указали аттрибут class) будет начинаться (Это делается при помощи такой конструкции как ^= ) с указанного значения (Мы указали filter-block), после которого могут следовать другие символы (Т.е. filter-block2, filter-block-filter-block-filter-block, filter-block-123, filter-blockkkkkkkkkkkkkkkkk и так далее, это всё будет проходить через выборку, т.к. имеет общее начало filter-block)

• Следует уточнить, что такой селектор не сработает для class="other-class filter-block1"
  или даже для class=" filter-block1"
• Сергей delphinpro, да, верно. Этот селектор будет выбирать все классы, которы имеют общее начало, которое указанно при выборке

1) Использовать регулярки, определяя какой блок какому пренадлежит.
2) Сделать нормально через дата-атрибуты, тогда будет что-то типа:

$(document).on('click', function(e) {   if (!$(e.target).closest(".filter").length) {     let filterNum = $(e.target).data('num');     $('.filter-block' + filterNum).hide();    }   e.stopPropagation(); });

• что то наподобие я делал, но оно вообще не работает.
• Александр, В программировании не бывает "не работает". Бывает "ошибка", которую надо исправить, или код, который работает, но делает то что написано, а не то что вам хотелось бы от него получить. Так что скорее всего проблема не в коде, а в реализации.