Php 使用javascript获取表单中最接近的元素

我在表单中有以下两个字段：

<input type="button" value="Rep" id="rep" name="rep" style="width:50px" onclick="addRep()" />
<input type="hidden" value="<?php echo $comment_id; ?>" />

您可以使用jquery方法

如果您想要纯javascript解决方案，请参阅本文

在那篇文章中，最好的答案是

使用nextSibling和previousSibling属性：

像jQuery这样的库可以为您处理所有这些跨浏览器检查
开箱即用

如果有对按钮的引用，并且希望元素位于按钮之后，则可以使用该属性

nextSibling;

确保避免任何来自注释、换行符或空格的文本对象

有关HTML Dom对象的完整概述，请查看
获取对当前按钮的引用，例如事件的
目标
属性，或者在事件处理程序中使用
此
。然后，您将在
nextSibling
属性中找到该按钮旁边的节点，但请注意：这通常是一个空白文本节点。因此，请改用
nextElementSibling
。
页面上不应该有多个具有相同ID的元素。类可以重复，但ID应该是唯一的

使用按下按钮的上下文，您处于正确的轨道上。如果使用jQuery这样的框架，这种事情会容易得多。Jquery有许多方法来遍历DOM one is next（），它将查找下一个同级元素

使用jQuery还可以更轻松地将javascript事件移出HTML，因此您可以在单独的JS文件中分配事件，而不是onclick=“”，从而将标记与行为分开。
为了可靠地获取表单中的下一个控件，您可以迭代表单的元素集合以查找主题元素，然后获取下一个，例如：

function getNextControl(el) {
  var elements = el && el.form && el.form.elements;
  if (elements) {
    for (var i=0, iLen=elements.length; i<iLen; i++) {
      if (elements[i] == el) {
        return elements[i + 1];
      }
    }
  }
}

函数getNextControl（el）{
var elements=el&&el.form&&el.form.elements；
如果（元素）{
对于（var i=0，iLen=elements.length；i考虑在按钮和隐藏元素之间可能有另一个元素。例如：

<input type="button" value="Rep" id="rep" name="rep" style="width:50px" onclick="addRep()"/>
<input type="text" id="someText" value="whatever"/>
<input type="hidden" id="someButton" value="anything"/>

另一种解决方案是将生成的Id存储在一个数组中（确保为所有内容都赋予Id属性）然后使用数组对元素进行索引。
nextSibling不会是一个不起作用的函数，因为有时候nextSibling会是其他元素或文本节点。有些浏览器会在元素之间的标记中插入文本节点，如果元素之间有空格，其他浏览器则不会。好吧，我接受了wilmoore的答案。似乎是最整洁的代码。although，以这种方式对所有元素进行迭代似乎成本太高。.虽然NextSibling在Firefox和IE中的工作方式不同，但代码很好。此代码在其中一种情况下无法正常工作。Hi@ClaraOnger:跨浏览器问题通过检查“node.nodeType==1”进行规范化，就像在第6行中所做的那样。
function getNextControl(el) {
  var elements = el && el.form && el.form.elements;
  if (elements) {
    for (var i=0, iLen=elements.length; i<iLen; i++) {
      if (elements[i] == el) {
        return elements[i + 1];
      }
    }
  }
}

<input type="button" value="Rep" id="rep" name="rep" style="width:50px" onclick="addRep()"/>
<input type="text" id="someText" value="whatever"/>
<input type="hidden" id="someButton" value="anything"/>

var rootNode    = document.getElementById('rep'),
    currentNode = rootNode.nextSibling,
    closestHidden;

function check(node) {
  return node.nodeType === 1 && node.localName === 'input' && node.type === 'hidden'
};

do {
  if (check(currentNode)) {
    closestHidden = currentNode; break;
  }
} while (currentNode = currentNode.nextSibling);

alert(closestHidden.id);