Как скрыть определенные элементы, с повторяющимися id, в определенном блоке при использовании change(), если этих блоков может быть много?

Question

[Yura_Mart]

Всем привет, подскажите пожалуйста!

С помощью php выводятся <div class="category_div"> в неограниченных количестваx, но внутри всегда есть:
1.

<select class="form-control" name="main_cat" id="main_cat"></select>

2. <div id="div_sub_cat_lvl_1">
3. <div id="div_sub_cat_lvl_2">
4. <div id="div_sub_cat_lvl_3">
5. <div id="div_sub_cat_lvl_4">
например:

<div class="category_div">
      <label class="floating-label">Выберите категорию</label>
      <select class="form-control" name="main_cat" id="main_cat">
           <option value=""></option>
      </select>
      <div id="div_sub_cat_lvl_1">
              <label class="control-label mb-10">Подкатегория 1 уровня</label>
              <select name="sub_cat_lvl_1" id="sub_cat_lvl_1">
                    <option value="1">Значение 1</option>
              </select>
      </div>
      <div id="div_sub_cat_lvl_2">
              <label class="control-label mb-10">Подкатегория 2 уровня</label>
              <select name="sub_cat_lvl_2" id="sub_cat_lvl_2">
                  <option value="2">Значение 2</option>
              </select>
      </div>
      <div id="div_sub_cat_lvl_3">
               <label class="control-label mb-10">Подкатегория 3 уровня</label>
               <select name="sub_cat_lvl_3" id="sub_cat_lvl_3">
                   <option value="3">Значение 3</option>
               </select>
      </div>
      <div id="div_sub_cat_lvl_4">
               <label class="control-label mb-10">Подкатегория 4 уровня</label>
               <select name="sub_cat_lvl_4" id="sub_cat_lvl_4">
                    <option value="4">Значение 4</option>
               </select>
       </div>
</div>

и таких блоков <div class="category_div"> может быть много...

Вопрос в том, как сделать так, чтобы при выборе каждого

<select class="form-control" name="main_cat" id="main_cat"></select>

в каждом <div class="category_div"> прятать все четыре <div id="div_sub_cat_lvl_1,2,3,4"> отдельно?

Накидал решение, но срабатывает только на первом блоке:

$('#main_cat').each(function () {
        $(this).change(function () {
            $("#div_sub_cat_lvl_1").hide();
            $("#div_sub_cat_lvl_2").hide();
            $("#div_sub_cat_lvl_3").hide();
            $("#div_sub_cat_lvl_4").hide();
        });
    })

Есть подозрения что нужно использовать each() или/и this
Знаю что так делать не стоит, но нужно исправить именно то, что есть.
Подскажите, пожалуйста, в чём ошибка?

Вот рабочее решение от пользователя "lavren":

$('.category_div select.form-control').change(function() {
        const parent = $(this).closest('.category_div');
        for(let i = 1; i <= 4; i++){
            parent.find('#div_sub_cat_lvl_' + i).hide();
        }
});

Comments

[WapSter]

В документе должны быть уникальные id Потому-что так по спеке задумано, js работает по спеке. И он в отличии от тебя знает, что на странице не может быть блоков с одинаковыми id

[WbICHA]

WapSter, lavren, Геннадий, вы всё верно написал об уникальности ид и я полностью с этим согласен, но я просто хочу отметить, что на том же ютубе ид совсем не уникальны.)
Впрочем, там и теги уникальные.

[Сергей delphinpro]

Одинаковых id не должно быть

[WapSter]

wisgest, на пример внимательно посмотри прежде чем, что-то писать

[wisgest]

WapSter, я был удалил свой комментарий, так как что-то здесь не вставляется emoji, но на что я должен был посмотреть? (Это была шуточная придирка к формулировке: «не должно быть» — не значит «не может быть».)

Answer 1

[pLavrenov]

Основы говорят что что на странице не должно быть одинаковых ID!

Ошибка в том что получая вот так $("#main_cat").val() всегда берется первый найденый.

Если все элементы сгруппированы то получать их надо внутри своего родителя.

Comments

[Yura_Mart]

хорошо, я понял что так делать не стоит, но всё же, как именно спрятать данные дивы, в конкретном блоке?

$("#div_sub_cat_lvl_1").hide();
$("#div_sub_cat_lvl_2").hide();
$("#div_sub_cat_lvl_3").hide();
$("#div_sub_cat_lvl_4").hide();

[pLavrenov]

Yura_Mart, неплохо бы код html

[Yura_Mart]

lavren, подкорректировал вопрос и добавил html

[pLavrenov]

Yura_Mart,

Какие значение у options? Пустые?
Есть возможность редактировать php?
Количество опций совпадает с количеством блоков?

[Yura_Mart]

lavren,
Какие значение у options? Пустые?
- в options подтягиваются значения из БД, их может быть много
Есть возможность редактировать php?
- да, есть возможность
Количество опций совпадает с количеством блоков?
- не совсем понял вопрос
в каждом <div id="div_sub_cat_lvl_1/2/3/4"> может быть неограниченное кол-во option
но самих <div id="div_sub_cat_lvl_1/2/3/4"> всегда четыре штуки в каждом <div class="category_div">

[pLavrenov]

Я так и не понял логики работы но вроде как так:

$('.category_div select.form-control').change(function() {
        $('.category_div').each(function () {
            for(let i = 1; i <= 4; i++){
                $(this).find('#div_sub_cat_lvl_' + i).hide();
            }
        });
    });

лучше добавить классы вместо id и тогда будет проще.

$('.category_div select.form-control').change(function() {
        $('.category_div').each(function () {
            $(this).find('.class-name').hide();
        });
    });

[Yura_Mart]

lavren,
При вашем варианте, hide() срабатывает на всех ('#div_sub_cat_lvl_' + i) во всех <div class="category_div"> сразу, а не только на том в, котором сделали change()

[Yura_Mart]

но прогресс уже есть)

[pLavrenov]

Yura_Mart, надо бы поучиться обьяснять

$('.category_div select.form-control').change(function() {
        const parent = $(this).closest('.category_div');
        for(let i = 1; i <= 4; i++){
            parent.find('#div_sub_cat_lvl_' + i).hide();
        }
    });

[Yura_Mart]

lavren, извините, если недостаточно подробно объяснил
да, теперь работает как надо, благодарю вас!