獲得最接近的元素形式使用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

回答

相關問題