查找在给定元素的右侧（或左侧）旁边呈现的终端 DOM 树元素

Question

我有一个半任意的 DOM 树，其中某处有一个 INPUT 控件。例如：

.terminal { white-space: no-wrap; display: inline-block; }

<div id="the-root">
  <span class="terminal">Alpha</span>
  <span><span class="terminal">Beta</span></span>
  <span>
     <span class="terminal"><input value="Gamma" /></span>
     <span><span class="terminal">Delta</span></span>
  </span>
  <span class="terminal">Epsilon</span>
</div>

INPUT 可以放在任何终端元素内。

我需要在 INPUT 的左侧和右侧找到下一个（呈现的）终端元素。 jQuery 有没有简单的方法？

解决方案的加分项还能够在 INPUT 的正上方和下方找到终端元素，以防条目太多以至于它们跨越多行。

这里有一个fiddle给你玩：http://jsfiddle.net/g4oq1q35/

Answer 1

我想你可以试试基于索引的解决方案

var $terminals = $('.terminal'),
    $terminal = $input.closest('.terminal'),
    idx = $terminals.index($terminal);
$terminals.eq(idx - 1).addClass('left');
$terminals.eq(idx + 1).addClass('right');

演示：Fiddle

查找在给定元素的右侧（或左侧）旁边呈现的终端 DOM 树元素

Find a terminal DOM tree element that is rendered next to the right (or left) to a given one

html

jquery

dom