javascript - 如何根据输入字段的值隐藏此表行 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>

请注意，为了便于阅读，每个级别上的 sibling 数量都比我在此处列出的数量要多。但层次结构如下所示。

然后我有这个输入字段来定义我们要过滤的内容:

<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

来自updated 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 是由某些第 3 方库(例如 ACF/Wordpress)自动生成的，并且插件更新会改变情况，那么甚至在您不执行甚至不知道的情况下，这种情况也可能发生。但是，如果您可以区分输入，那么无论它们位于页面上的哪个位置，您都可以定位正确的输入。

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

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

然后更新你的 JS 以仅定位那些:

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

如果无法更改 HTML，那么您将不得不依赖并使用位置。相反，迭代所有 div.acf-input s，并找到每个中的第一个输入:

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

Working JSFiddle (选项 2)。