Question

我需要输入feald中的下一个按钮的名称，按钮可以位于不同的位置（在表格中，在桌子后面的div中等）。就像quelltext中的下一个发现一样。

HTML：

<table>
    <tr>
        <td>Benutzer:</td>
        <td><input type="text" id="Benutzername" name="Benutzername"/></td>
    </tr>
    <tr>
        <td>Passwort:</td>
        <td><input type="password" id="Passwort" name="Passwort"/></td>
    </tr>
    <tr>
        <td></td>
        <td class="fr"><a href="#info" class="submit" onclick="login()">
                <button>Login</button>
            </a></td>
    </tr>
</table>

JS：

    $('input').keypress(function(event){
    if(event.which==13){
        event.preventDefault();
        alert($(this).closest('button').html());
        alert($(this).next('button').html());
    }
});

警报始终未定义。

编辑：当然，我可以给按钮一个唯一的ID，但我有1页10个按钮，每个10-20输入。因此，我希望一种简单的方法可以始终打电话给下一个，并且不会给所有输入提供单独的ID和单独的funktion。

EDIT2：我使用了按钮的innerHTML这个名字。

EDIT3：该表并不总是围绕输入。

EDIT4：更好的例子http://jsfiddle.net/LF6pK/7/，我更喜欢动态的下一个按钮解决方案。

Answer 1

看，问题是：

.closest()用于调用最近的父母。

.next()用于在元素的同一父元素内调用下一个SIBLING。

你应该怎么做：

使用.closest()来调用包裹<input>和<button>的CLOSEST PARENT。正如我在HTML中看到的那样，包含两者的最接近的父级是<table>标记。然后你必须使用：

$('input').keypress(function(event){
    if(event.which==13){
        event.preventDefault();
        alert($(this).closest('table').find('button').text());
    }
});

小提琴：

http://jsfiddle.net/LF6pK/5/

<强>更新：

var closest = $(this).closest(':has(button)')会找到距离最近的父母

.parentsUntil(closest)会调用所有父母，直到最近的父母有一个按钮

.nextAll('button')会调用每个父母旁边的按钮

.first()将过滤下一个

的第一个

jQuery的：

$('input').keypress(function(event){
    if(event.which==13){
        var closest = $(this).closest(':has(button)')
        event.preventDefault();
        alert($(this).parentsUntil(closest).nextAll('button').first().text());
    }
});

小提琴：

http://jsfiddle.net/LF6pK/9/

更新[2]：

$('input').keypress(function(event){
    if(event.which==13){
        var closest = $(this).closest(':has(button)')
        event.preventDefault();
        if($(this).parentsUntil(closest).nextAll('button').length >= 1){
            alert($(this).parentsUntil(closest).nextAll('button').first().text());
        } else {
            alert($(this).parentsUntil(closest).nextAll().find('button').first().text());
        }
    }
});

小提琴：

http://jsfiddle.net/LF6pK/11/

Answer 2

它会显示按钮的文字。

$(this).parents().find('button').text()

OR

$(this).closest('table').find('button').text()

Answer 3

您必须确保每个按钮都具有相同的包装类（不需要是直接父级）。

<table class='wrapper'>
   ...
   <tr>
       <td>
           <button></button>
       </td>
</table>

<div class='wrapper'>
    <input type='text'>
    <button></button>
</div>

然后您可以通过以下方式访问它：

$('input').keypress(function(event){
    if(event.which==13){

        var button = $(this).closest('.wrapper').find('button');

        event.preventDefault();
        alert(button.text());
        alert(button.text());
    }
});

Answer 4

alert($(this).offsetParent().find('button').html());

http://jsfiddle.net/LF6pK/4/

只需将元素放在亲戚或你想要的位置。

如果您只是尝试按回车按键执行操作，您是否考虑过使用表单？

<form>
<table>
    <tr>
        <td>Benutzer:</td>
        <td><input type="text" id="Benutzername" name="Benutzername"/></td>
    </tr>
    <tr>
        <td>Passwort:</td>
        <td><input type="password" id="Passwort" name="Passwort"/></td>
    </tr>
    <tr>
        <td></td>
        <td class="fr"><a href="#info" class="submit" onclick="login()"><button>Login</button></a></td>
    </tr>
</table>
</form>
<script>
$('body').on('submit','form',function(e) {
    e.preventDefault();
    // Do whatever with the inputs
});
</script>

输入后jQuery最近的按钮

4 个答案: