如何通過知道另一個父級的父級名稱來獲取元素值

Question

假設我有2個具有相同ID的文本區域，而其父母具有相同的ID，但是其父表單具有不同的名稱..而我需要獲取第二個表單的第二個文本區域的值！！！ 這是一個簡單的代碼。

 var formX = document.getElementsByName("form2"); for(i = 0; i < formX.length; i++){ if(formX[i].type == "textarea"){ var inputval = formX.value; alert(inputval); } } 

 <form name="form1"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value1</textarea> </div> </div> </form> <form name="form2"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value2</textarea> </div> </div> </form> 

• 當我嘗試它時，沒有警報出現，我知道這是因為循環未找到任何文本區域，因為該循環位於表單內的另一個元素內。.那么，如何深入父母和孩子？

非常感謝

Answer 1

您可以使用jQuery find()或children()方法獲得相同的結果。 在這里，您可以閱讀有關jQuery Traversing的信息 。

 console.log($('[name=form2]').find('#sameID').text()); //or value() can be used in place of text() method 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value1</textarea> </div> </div> </form> <form name="form2"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value2</textarea> </div> </div> </form> 

Answer 2

沒有相同的目的給兩個不同的元素。 您對使用ID的概念感到困惑。 嘗試使用其他ID，它將起作用。 例如：

$('#parentId').find('#childId');

要么

$('#parentId #childId');

Answer 3

您將使用單行代碼獲得第二個textarea值。 無需使用任何ID。 檢查下面的更新的片段。

 console.log($('form[name="form2"] textarea').val()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value1</textarea> </div> </div> </form> <form name="form2"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value2</textarea> </div> </div> </form> 

Answer 4

您還可以使用純js從所需的textarea中獲取價值

 var forms = document.getElementsByTagName('form'); for(var i = 0, ii = forms.length; i < ii; i++) { var textArea = forms[i].getElementsByTagName("textarea")[0]; console.log(textArea.value) } 

 <form name="form1"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value1</textarea> </div> </div> </form> <form name="form2"> <div id="samediv1"> <div id="samediv2"> <textarea id="sameID">value2</textarea> </div> </div> </form> 

Answer 5

請嘗試以下代碼

val2 = $("form[name=form2] #samediv2 textarea").val()

上面的代碼將返回value作為value2

希望這可以幫助