Как мне найти следующий элемент в DOM?

Question

Как мне искать следующий элемент (скажем, входной), начиная с заданного (они не являются ближайшими родственниками)

В следующем примере ( кодовая ручка здесь ) мне нужно установить значение "category", имеющее изначально значение "prod".

Из "prod" я должен искать следующий "вход":

$("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') напрямую, но я предполагаю, что это учебное упражнение.