时间戳

首页 > 解决方案 > jQuery find 和 prev 方法

javascript - jQuery find 和 prev 方法

问题描述

我有一个 HTML 表单，我在其上运行 jQuery“查找”方法来查找一组特定的元素。我想找到的一种元素必须满足这两个标准：

在下面的示例表单中，将找到第一个 div（在日历下拉菜单中选择），第二个（“忽略”）不会找到，第三个会。

<form>
    <div class="calendar-dropdown">
        <select>
            // options
        </select>
    </div>

    <input type="text" value="one">
    <div class="ignore">Ignored</div>

    <input type="text" value="one">
    <div class="error">Show error</div>
</form>

我当前的查找方法如下所示：

form.find('.calendar-dropdown select, :text:visible.next(.error)')

日历下拉菜单可以找到我还需要处理的另一组元素。我知道这个解决方案是错误的，但我不知道如何使它工作。这可以使用 find 方法完成吗？

标签： javascriptjquery

解决方案

您可以使用.filter获取所有输入，然后过滤到您想要的输入：

$("input").filter((i, e) => $(e).next(".error").length != 0)

在示例中，第一个 div 不会被找到，但第二个会 [被发现]

$("input")
  .filter((i, e) => $(e).next(".error").length != 0)
  .addClass("inputError")
.inputError {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" value="one">
  <div class="ignore">Ignored</div>

  <input type="text" value="two">
  <div class="error">Show error</div>
</form>

注意：.find没有要应用的等效回调/选择器函数。

您可以添加自定义选择器，例如:hasnext，但如果.filter涵盖您，它过于复杂。

您还可以.add在过滤后组合多个选择器。

推荐阅读