使用 jQuery，我需要确定字段集中的最后一个可见输入

Question

我有一个代码笔可以显示我的问题：http://codepen.io/esdictor/pen/KdqeEV

结构：我有一个包含字段集的表单。每个字段集都包含 FormRows (div class="FormRow")。每个 FormRow 都包含字段 (div class="FormField")。每个字段通常包含一个表单元素（input、select、textarea 等，但对于这个示例，我将坚持使用 inputs）。所以：

<form>
    <fieldset>
        <legend>Group 1</legend>
        <div class="FormRow">
            <div class="FormField">
                <label for="Test1">Test1</label>
                <input type="text" id="Test1" />
            </div>
            <div class="FormField">
                <label for="Test2">Test2</label>
                <input type="text" id="Test2" />
            </div>
        </div>
    </fieldset>
</form>>

要求：我的页面需要对每个字段集中的最后一个输入做出反应，除了最终字段集。我想出了一个 selector 一开始效果很好：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type input')

问题：最近有人给了我一些新元素，这些元素可能会根据表单中的其他数据被隐藏，并且在这些元素位于字段集末尾的情况下并且被隐藏了，我的代码不再有效。

我的示例：上面链接的代码笔在第 2 组字段集中有一个隐藏的 TextA 输入（实际上，整个 FormRow 都被隐藏）。因为这是隐藏的，所以 Test9 输入应该是红色的。但是，我一直无法想出一个 select 或考虑到这一点。

注意这种形式是数据驱动的，用于许多不同类型的数据，所以我不能硬编码任何东西。当控件是字段集中最后一个可见控件时，我只需要 "know"，这样我就可以相应地编写我的事件。

一如既往，提前致谢！

Answer 1

您可以尝试使用“:visible”选择器。

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type input:visible')

或者如果它的 FormField 被隐藏：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type:visible input')

Answer 2

问题是，当您 select 最后一个 FormField（或事件最后一个 FormRow）时，它不能有任何可见的输入。

你可以这样做：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type:has(input:visible) .FormField:last-of-type:has(input:visible) input:visible')

或者避免非常复杂的select或者：

$('form fieldset:not(:last-of-type)').each(function() {
    var $fieldset = $(this),
        $input = $fieldset.find("input:visible:last");
    if ($input.length > 0)
        // Do your work here
        $input.css("background-color", "red");
});

根据评论您还可以使用：

$('form fieldset:not(:last-of-type) .FormRow:last-of-type .FormField:last-of-type input, form fieldset:not(:last-of-type) input:visible:last')

使用 jQuery，我需要确定字段集中的最后一个可见输入

With jQuery, I need to determine the last visible input in a fieldset

jquery

jquery-selectors