Question

我有以下（重复）html：

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

在链接的click事件上使用jQuery我想检索输入元素的值。我尝试了各种parent（），children（），nextAll（），prev（）组合，但是我无法获得输入元素的值。

这是我的测试功能的链接。 jsFiddle Link

另外，我如何检索第一个td元素的文本？

非常感谢帮助我实现这一目标迈克尔

Answer 1

您可以使用parent从td转到a，然后next转到以下td，然后{{3转到input元素：

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

这是一个find。

要从第一个td获取文字，您可以采用相同的方法，但使用updated fiddle代替next。

另外，看到你有几次重复的HTML片段，将DOM {树上方的click事件处理程序绑定起来可能会更高效（也许你已经是，你还没有发布任何JS所以我不知道）：

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

Answer 2

我对这些事情的常用方法是使用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中移动内容。

Answer 3

它会给你输入值

$(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>

使用jQuery引用html输入元素

3 个答案: