Jquery Multiple Divs

這只是一個示例，我正在編寫jQuery程序，它似乎是我使用的一些功能的更好路線。反正這是問題。在我的第二個div上，點擊編輯按鈕，當我點擊編輯按鈕時，我想提醒文本框的值。Jquery Multiple Divs

是的，這可能是重複的，但是從其他堆棧問題的答案已經說我使用類而不是Id。我有，但jquery隻影響第一個div。當我點擊第一個div上的編輯它警告251.但是，當我點擊第二個div上的編輯警報251我希望它提醒351.謝謝堆棧。

<!DOCTYPE html> 
<html> 
<head> 

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.editdet').click (function() { 
    alert($('.addet').val()); 
}); 
}); 
</script> 
</head> 
<body> 
<div class = "newbox"> 
<form class = "something"> 
<table> 
    <tr> 
    <td> 
     <input type="text" id="addet" class = "addet" value="251"/> 
     <input type="button" id="editdet" class = "editdet" value="Edit"/> 
    </td> 
    </tr> 
</table> 
</form> 
</div> 
<br> 

<div class = "newbox"> 
<form class = "something"> 
<table> 
    <tr> 
    <td> 
     <input type="text" id="addet" class = "addet" value="351"/> 
     <input type="button" id="editdet" class = "editdet" value="Edit"/> 
    </td> 
    </tr> 
</table> 
</form> 
</div> 

</body> 
</html>

來源

2015-12-18 Brandon C

無效的標記重複相同的ID。 – Jai

我應該在輸入中沒有ID嗎？只用課堂？ –

絕對................！對於每個元素，id都是唯一的，無論輸入或divs或表等。 – Jai

這是因爲$('.addet')是所有類名addet元素的集合。

然後當你在收集做.val()，它抓住了集合，這是頁面上的第一個的第一個值，因此251

你需要得到addet，是相到您點擊過的editdet。您可以用prev()功能實現這一點：

$('.editdet').click (function() { 
    alert($(this).prev('.addet').val()); 
});

這將讓前一個元素。

無論您元素，你需要相對於在當前元素（$(this)）是DOM結構遍歷。

Some helpful jQuery functions for traversing the DOM structure

來源

2015-12-18 13:50:45

當我使用它時它警告未定義。我認爲，通過將這使其無法工作 –

@BrandonC正如我所說的，你需要從你點擊的元素的位置遍歷DOM樹。在這種情況下，您可以這樣做：'$（this）.closest（'tr'）。find（'。addet'）。val（）;'。這將找到最接近的'tr'元素並在其中找到'.addet'元素。 –

非常感謝你！我對這個jquery業務很陌生哈哈！ –

使用

<input onclick="edit()" type="button" id="editdet" class = "editdet" value="Edit"/>

與

<script> 
    function edit() { 
    alert($(this).prev().val()); 
    } 
</script>

來源

2015-12-18 13:52:14

首先，你不能有類似的ID。第二件事是你沒有正確定位你的價值。

你需要使用什麼是Sibiling /上一頁選擇

$(document).ready(function(){ 
    $('.editdet').click (function() { 
    alert($(this).prev().val()); 
}); 
});

在這種特定的情況下，應制定

來源

2015-12-18 13:53:39

是的，謝謝！但是我注意到，如果是有意義的，那麼它是在它自己的td中。我希望我知道如何在評論中做代碼。我會如何使用您的示例來完成這項工作？謝謝Baldrani –

@BrandonC看到我的回答如下... –

你可以用這個代碼試試：

<script> 
    function edit() { 
     alert($(this).parent().find(".addet").val()); 
    } 
</script>

來源

2015-12-18 13:58:02

試試這個一個，

$(".addet").each(function() { 
     alert($(this).val()); 
    });

來源

2015-12-18 13:59:59 Samyappa

這樣做的工作，但是當我點擊任一按鈕它會警告div的值。 –

Jquery Multiple Divs

回答

相關問題