引用使用jQuery

的HTML input元素我有以下的（重複）的HTML：引用使用jQuery

<tr> 
    <td>Some text</td> 
    <td><a href="#">Click me<a/></td> 
    <td><form><input type="hidden" value="4"/></form></td> 
</tr>

上我想檢索輸入元素的值的鏈接的單擊事件使用jQuery。我嘗試了各種父母（），孩子（），nextAll（），prev（）組合，但我無法獲得輸入元素的值。

這裏是我的測試功能的鏈接。 jsFiddle Link

此外，我將如何檢索第一個TD元素的文本？

非常感謝您幫助我實現這一目標。
邁克爾

來源

2012-02-17 Michael Frey

您可以使用parent從a獲取到td，然後next得到以下td，然後find才能到input元素：

$("a").click(function() { 
    var value = $(this).parent().next().find("input").val(); 
});

這裏是一個updated fiddle。

要從第一個td獲得文本，您可以採用幾乎相同的方法，但使用prev而不是next。

此外，看到你有幾個重複的HTML片段，它可能會更高效地綁定DOM樹上更高的事件處理程序（可能你已經是，你沒有發佈任何JS，所以我不知道）：

$("table").on("click", "a", function() { 
    //Do stuff 
});

來源

2012-02-17 08:38:55

非常感謝。說得通。令人沮喪的是如此簡單的事情可能是這樣一個問題。 :-) DOM樹中更高的綁定是我想知道的其他東西，所以這很好。 – 2012-02-17 08:52:56

@MichaelFrey - 沒問題，很高興我可以幫助:) – 2012-02-17 08:54:18

表代碼，打破了我所有的jQuery代碼。此外，我將如何使用$（this）來引用'a'元素，因爲我認爲這會引用表格。 – 2012-02-17 08:57:32

我通常的做法這些東西是用closest回去一些常見的容器，然後find回來了下來：

$('a').click(function() { 
    var $input = $(this).closest('tr').find('input'); 
    // Do something with $input.val() 
});

演示：http://jsfiddle.net/ambiguous/Zh6Zk/

closest/find方法可以很好地抵禦DOM結構的變化，因此您不必擔心在HTML中移動東西。

來源

2012-02-17 08:42:33

它會給你的輸入值

$(document).ready(function(e) { 
    $('.myAnchor').click(function(e){ 
    var parentNode = $(this).parent(); 
    var valueOfInput = $(parentNode).next().children('input').val(); 
      alert(valueOfInput); 
}); 
});

HTML：

<form> 
<table>  
    <tr> 
     <td>Some text</td> 
     <td><a href="#" class="myAnchor">Click me</a></td> 
     <td><input type=hidden value="4"/></td> 
    </tr> 
</table> 
</form>

來源

2012-02-17 08:46:22

你爲什麼得到'tagName'？你已經有了一個包含你想要的元素的jQuery對象。此外，你不應該使用'attr'來獲得價值。使用'val'來代替。 – 2012-02-17 08:51:52

感謝您糾正我，爲標記名..我只是檢查，我得到正確的標記或不，讓我編輯它 – 2012-02-17 09:05:45

沒問題。現在好多了，但是不需要將'parentNode'傳遞給jQuery，因爲它已經是一個jQuery對象了。你可以做'parentNode.next（）'。 – 2012-02-17 09:10:18

引用使用jQuery

回答

相關問題