如何根据向下 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不匹配，该行将被隐藏。 但是第二个输入值是一个时间，它永远不会匹配日期，无论日期是什么——所以每一行都将始终被隐藏。

有两种明显的方法可以解决这个问题 - 1) 使输入可区分，因此您可以在过滤器比较中仅针对日期输入，或者2) 以某种方式仅针对 2 组中的第一个输入。

第一个选项（使它们可区分）是迄今为止最好的，因为第二个选项依赖于 HTML 的布局。 将来可能会发生这样的情况，您将进行重新设计并且输入的顺序不会相同，甚至不会在同一个<div> ，然后您的 JS 就会崩溃。 如果 HTML 是由某些 3rd 方库（例如 ACF/Wordpress）自动生成的，并且插件更新改变了一些事情，那么这甚至可能在您不这样做甚至不知道它的情况下发生。 但是，如果您可以区分输入，那么无论它们在页面上的哪个位置，您都可以定位正确的输入。

为了使它们可区分，您可以添加一个类，例如：

<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）。