获得最接近的元素形式使用javascript

我有一个形式以下两个领域：获得最接近的元素形式使用javascript

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

我需要在表单的隐藏字段的值。所以我想在触发按钮时使用一些函数调用按钮旁边的隐藏字段字段。

我需要专门获取该隐藏字段，该按钮被按下后。

我不能使用像getElementByID这样的方法，因为我使用相同的ID生成了很多隐藏的字段和按钮..（我使用php动态生成它们）。

从理论上讲，我认为我能得到按下按钮的情况下（其捕获事件发生后），然后使用一些功能来查找形式的下一个元素..

但我不知道如何要做到这一点！

来源

2011-12-08 Dmitry Makovetskiyd

想想看，你可能也有按钮，您的隐藏元素之间的另一种元素。例如：

<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);

来源

2011-12-08 07:45:11

谢谢你的 –

:)我的荣幸。 –

nextSibling不工作在Firefox和IE一样。此代码在其中一个或另一个中无法正常工作。 –

您可以使用jquery next()方法。

如果你想要一个纯JavaScript的解决方案，看到这个职位Get next/previous element using Javascript

在该职位的最佳投票的答案是，

使用nextSibling和previousSibling属性：

<div id="foo1"></div> <div id="foo2"></div> <div id="foo3"></div> 

document.getElementById('foo2').nextSibling; // #foo3 
document.getElementById('foo2').previousSibling; // #foo1

但是在某些浏览器中（我忘记了哪个），您还需要检查个空白和注释节点：

var div = document.getElementById('foo2'); var nextSibling = 
div.nextSibling; while(nextSibling && nextSibling.nodeType != 1) { 
    nextSibling = nextSibling.nextSibling }

图书馆像jQuery的处理都为你这些跨浏览器检查开箱。

来源

2011-12-08 07:06:00

如果你有到按钮的引用，你想要的按钮后，元素，你可以使用属性

nextSibling;

确保你避免来自评论，换行符任何文本对象或白色空间。

在过去的HTML DOM对象的完整概述看看http://www.w3schools.com/jsref/dom_obj_all.asp

来源

2011-12-08 07:06:19

非常感谢你..你解决了我的问题... –

nextSibling不会是一个功能 – Bergi

这是行不通的，因为有时nextSibling会是其他元素或文本节点。如果元素之间的标记中存在任何空格，则某些浏览器会插入文本节点，而其他浏览器则不会。 – RobG

获取当前按钮，例如参考该事件的target属性或仅在事件处理程序中使用this。然后您会在nextSibling属性中找到该按钮旁边的节点，但要小心：这通常是一个空白文本节点。因此改用nextElementSibling。

来源

2011-12-08 07:08:51 Bergi

您不应该在页面上拥有多个具有相同ID的元素。类可以重复，但ID应该是唯一的。

您正在使用按下按钮的上下文的正确轨道。如果你使用像jQuery这样的框架，这种事情就容易多了。jQuery有遍历DOM http://api.jquery.com/category/traversing/一个是下一个（），它会寻找下一个同级元素许多方法。

使用jQuery也将使它更容易将你的JavaScript事件了HTML的，所以不是的onclick =“”你可以指定在一个单独的JS文件的事件，保持标记的行为分开。

来源

2011-12-08 07:09:33

为了可靠地获取表单中的下一个控件，您可以遍历窗体的元素集合，即可找出主题元素，那么获得下一个，如：

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]; 
     } 
    } 
    } 
}

现在你可以但结构化你的HTML你喜欢，上面的将返回下一个表单控件，或者如果没有的话，将会返回undefined。

来源

2011-12-08 07:25:55 RobG

另一解决方案是存储生成的数组中的Ids（确保您将所有内容都设为Id属性）并使用数组来索引元素。

来源

2012-06-18 08:57:33

获得最接近的元素形式使用javascript

回答

相关问题