Как найти блочный элемент у которого дочерний имеет определенное значение

@End_less · Регистрация: 19.04.2016

Студворк — интернет-сервис помощи студентам

Приветствую.

Создаю окно в котором создается запись в бд о новом объекте. Имеется большое количество столбцов, но не все иногда нужны для каждого объекта, поэтому пришлось скрыть не которые поля и дать доступ пользователю выбирать столбцы и вбивать по нему информацию.

Второе ему окно это поля, если на них имеется (Checked) галочка, то поля появляются в первом окне ввода нового объекта, если же нет, то он скроется. Теперь пытаюсь это реализовать без множество кодинга и не прописывать для каждого той или иной класс по которому смогу найти данный блочный элемент.

В общем, идея такая, при нажатии выборки поля (второе окно) у меня записывается название данного поля, дальше я должен найти его по дереву DOM и скрыть (допустим поле "Наименование"). Дальше этого кода не продвинулся:

JavaScript
1
$('.itemRow').children('label').html('Наименование')

PHP:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="itemRow fl-cnt_space">
    <label for="">Наименование</label>
    <div class="itemRow-set">
        <input type="text" placeholder="Объект 1">
        <div class="input-line"></div>
    </div>
</div>
<div class="itemRow fl-cnt_space">
    <label for="">Адрес</label>
    <div class="itemRow-set">
        <input type="text" placeholder="ул. Пушкина, д. Колотушкина, кв. 11, 7 этаж">
        <div class="input-line"></div>
    </div>
</div>

@web_coder2 · 05.11.2020, 22:50

Здравствуйте End_less,

Сообщение от End_less

В общем, идея такая, при нажатии выборки поля (второе окно) у меня записывается название данного поля

Я предполагаю (не видя кода обработки второй формы)вы получаете например HTMLElement поля, тогда вы можете например с помощью classList.add класс field-hidden

CSS
1
2
3
.field-hidden{
    display:none;
}

Еще какие то размышления (это не обязательно читать xD) Я не знаю как у Вас сделано, может у формы генерируются и уже все доступы к элементам прописаны.

На первой форме в блоках полей у Вас сейчас классы

Code
1
itemRow fl-cnt_space

и они повторяются, т.е. в такой ситуации сложно отличить одно поле на форме от другого, только по индексам внутри контейнера(но это плохой вариант), добавьте например класс

Code
1
prefix-field-name

для поля Наименование и

Code
1
prefix-field-address

для Адреса, и далее на второй форме вы должны получать идентификаторы этих классов, и далее по селектору

Code
1
prefix-field-address

получать элемент поля. А далее добавляйте к элементу класс field-hidden если нужно его скрыть.

@End_less · 06.11.2020, 09:22 **[ТС]**

Сообщение от web_coder2

получать элемент поля. А далее добавляйте к элементу класс field-hidden если нужно его скрыть.

Если я для каждого поля буду вводить в него уникальный класс "prefix-field-name", то у меня будет большое количество кода на JS.

В общем, нашел альтернативу, написал как быдло. При загрузке страницы у меня из бд запросом выведет все столбцы таблицы "Объекта". В 1 окне у классов "itemRow" добавлю атрибут с наименованием столбца "data-name" и так же добавлю атрибут для второго окна "data-select". И уже при нажатии на поле во втором окне, он будет брать значение атрибута "data-select" и уже искать данное поле в 1 окне по атрибуту "data-name". Просто хотел максимально минимизировать свой код, чтобы не получилась каша.

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="itemRow fl-cnt_space" data-name="Name">
    <label for="">Наименование</label>
    <div class="itemRow-set">
        <input type="text" placeholder="Объект 1">
        <div class="input-line"></div>
    </div>
</div>
<div class="itemRow fl-cnt_space" data-name="Address">
    <label for="">Адрес</label>
    <div class="itemRow-set">
        <input type="text" placeholder="ул. Пушкина, д. Колотушкина, кв. 11, 7 этаж">
        <div class="input-line"></div>
    </div>
</div>

JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    /* Скрипт выводит поля по их выборке - Создание объекта */
    $('.select-list-row').on('click', function(){
 
        // На какую выборку полей мы нажали
        var valueThis = $(this).attr('data-select');
 
        // Убираем галочку и поле или ставим галочку и поле
        if($(this).children('input').prop('checked')){
            if($(this).hasClass('select-list-row--required') == false){
                $(this).children('input').prop('checked', false);
                $('.itemRow[data-name='+valueThis+']').css('display', 'none');
            }
        }
            
        else {
            $(this).children('input').prop('checked', true);
            $('.itemRow[data-name='+valueThis+']').css('display', 'flex');
        }
 
        return false;
    })

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .