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

Question

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

在下面的示例（ 此处为codepen ）中，我需要设置一个最初具有“ 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遍历执行所需的操作，您需要从.prod输入中获取最接近的父li ，然后使用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')元素，但是我认为这是一个学习练习。