Question

我应该如何从给定的元素（它们不是直接的下一个兄弟姐妹）开始搜索下一个元素（例如，输入）

在下面的示例（codepen here）中，我需要设置一个初始为“ prod”的“ categ”值。

我应该从“产品”中搜索下一个“输入”：

$("input.categ").val("cat");
$("input.prod").next("input").val("dog");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><input class="prod"></li>
  <li><input class="categ">I need "dog" value here</li> 
</ul>

真实案例

想象一下一系列产品及其类别。用户更改产品后，类别应相应更改为所选产品：

[prod 1][categ 1]
[prod 2][categ 2]
...
[prod X][categ X]

Answer 1

您的代码存在问题是因为next()寻找同级元素，而input元素不是同级元素。

要通过DOM遍历执行所需的操作，您需要从li输入中获取最接近的父.prod，然后使用next()来获取同级li，然后find()获得.categ输入，就像这样：

$("input.categ").val("cat");
$("input.prod").closest('li').next('li').find("input").val("dog");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><input class="prod"></li>
  <li><input class="categ">I need "dog" value here</li> 
</ul>

您应该注意，在这种情况下DOM遍历是没有意义的，因为您可以直接选择$('.categ')元素，但是我认为这是一个学习练习。

如何在DOM中搜索下一个元素？

1 个答案: