Как я могу скрыть эту строку таблицы на основе значения поля ввода 4 уровня вниз

Question

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

Поле ввода в строке переносится несколько раз. Мне не удается скрыть строку на основе этого входного значения.

Вот как выглядит строка:

<tr class="acf-row" data-id="row-13">
    <td class="acf-field acf-field-date-picker acf-field-5de02ec006a2e" data-name="datum" data-type="date_picker" data-key="field_5de02ec006a2e">
        <div class="acf-input">
             <div class="acf-date-picker acf-input-wrap" data-date_format="dd.mm.yy" data-first_day="1">
                  <input type="text" class="input hasDatepicker" value="24.03.2020" id="dp1582735317447">                     
             </div>
        </div>
    </td>
</tr>

Обратите внимание, что на каждом уровне больше братьев и сестер, чем я положить сюда для удобства чтения Но иерархия такая, как здесь показано.

Тогда у меня есть поле ввода для определения того, что мы хотим фильтровать:

<input placeholder="Datum filtern" type="text" id="datefilter" style="padding:5px; width:150px;">

И, наконец, jquery:

$( "#datefilter" ).change(function() {  

    var filterdate = $("#datefilter").val();

    jQuery('.input.hasDatepicker').each(function() {
        var currentElement = $(this);
        var dateinfield = currentElement.val();

        if( dateinfield !== filterdate){            
                    $(this).closest('.acf-row').hide();                     
        }           
    });     
});

В настоящее время он скрывает все строки, а не только строки с другим значением. Что должно произойти, это то, что скрываются только строки, где значение #datefilter отличается от значения .input.hasDatepicker

Я пробовал несколько вещей, например пытался использовать .parent (). Parent (). .. но не получил его на работу. Помощь будет принята с благодарностью.

Вот jsfiddle со всей таблицей, включая всех братьев и сестер: https://jsfiddle.net/59by3w7o/

ОБНОВЛЕНИЕ: Я думаю, что теперь я могу точно сказать, проблема 2 экземпляра элемента ввода в каждой строке. Вот jsfiddle только с этим и без шума:

https://jsfiddle.net/8k41xy6u/

Как я могу решить это? Я попытался поиграть с: first, но не смог заставить его взять первое в каждом .acf-ряду и не самое первое во всем документе.

Answer 1

Из обновленного JSFiddle строка таблицы выглядит примерно так:

<tr class="acf-row">
    <td>
        <div class="acf-input">
            <div>
                <input class="input hasDatepicker" type="text" value="26.03.2020">
                <input class="input hasDatepicker" type="text" value="10:00">
            </div>
        </div>
    </td>
</tr>

И теперь проблема становится понятной. В JS, .each() перебирает все с классами .input и .hasDatepicker. Оба ваших входа соответствуют этому, поэтому он проверит их оба. Если значение одного из них не соответствует вашему filterdate, эта строка будет скрыта. Но 2-е входное значение - это время, и оно никогда не будет соответствовать дате, независимо от того, какая дата - поэтому каждая строка всегда будет скрыта.

Существует 2 очевидных способа решения этой проблемы - 1) сделать входы различимы, так что вы можете выбрать только дату, указанную при сравнении фильтров, ИЛИ 2) каким-то образом нацелить только первый вход в наборе 2.

Первый вариант (сделать их различим), безусловно, лучший, так как второй опирается на макет HTML. В будущем может случиться, что вы сделаете редизайн, и входные данные будут не в том же порядке или даже в том же <div>, и тогда ваш JS сломается. Это может даже произойти, если вы этого не сделаете или даже не узнаете об этом, если HTML автоматически сгенерирован какой-то сторонней библиотекой (например, ACF / Wordpress), и обновление плагина меняет дело. Но если вы можете различить guish входов, то вы можете выбрать нужные, независимо от того, где они находятся на странице.

Чтобы сделать их различимыми, вы можете добавить класс, например:

<input class="input hasDatepicker date" type="text" value="26.03.2020">

Затем обновите ваш JS, чтобы он был нацелен только на:

$('.input.hasDatepicker.date').each(function(i) {

Если изменение HTML не вариант, вам придется положиться и использовать положения. Вместо этого выполните итерацию по всем div.acf-input с и найдите первый вход в каждом:

$('div.acf-input').each(function(i) {
    var dateinfield = $(this).find('input.input.hasDatepicker').first().val();
    // ...

Рабочий JSFiddle (из варианта 2).