Question

首先，我想为那里可怕的头衔道歉，但这是我能想到总结我的问题的最佳方式。

目前，我使用jQuery脚本在blur input:text上检查输入的文本值是否大于某个数量。如果没有，输入会突出显示为红色 - 但我接下来想要发生的是在相邻列中有一个<p>，以便更改它的文本。

我的HTML看起来像这样：

<tr>
      <td width="15%"><label for="example">Hello world</label></td>
      <td width="70%"><input type="text" class="" id="example" value=""/></td>
      <td width="15%"><p name="example"></p></td>
 </tr>

我的jQuery / css是：

<style type="text/css">
    .fail{
        border:2px red solid;
    }   
    </style>

    <script type="text/javascript">
    /* Inline, onBlur validation 
    Text */
    $('input:text').blur(function() {
        if ($(this).val().length <= 2) {
            $(this).attr('class', 'fail');
            }else{$(this).attr('class', '');}
    });
    </script>

是否有可能在blur以某种方式使用与所选输入name相同的id来调用下一个元素，然后更改它的文本？我知道这一定是一个难以解决的动态难题，但这是我真正需要的东西。

过去，我通过重复每个元素的代码来达到同样的效果，但这并不适合这里。

感谢您给我任何建议！

Answer 1

zzzzBov是正确的但是使用上下文来提高效率和/或标记名会更好。另外添加一个引用$（this）的变量。

var $this = $(this);
$('p[name="'+$this.attr('id')+'"]', $this.closest('tr')).text('foo bar baz');

在评论后编辑 上面和zzzzBov的答案之间的区别是：

$('[name="'+$(this).attr('id')+'"]')  
// will start traversing the DOM starting at the beginning of the 
// document. Largest search.

$('p[name="'+$this.attr('id')+'"]')
// will first call getElementsByTagName and try to find a match, smaller search.

$('p[name="'+$this.attr('id')+'"]', $this.closest('tr'))
// will only search the contents of the closest('tr') tag 
// that is an ancestor of your input. Even smaller search.

一般来说，jQuery选择器更具体，可以提高性能。此外，使用变量来存储选定的元素（例如var $this = $(this);或var $myElement = $('#myElement')）比一遍又一遍地创建相同的选择器更有效。请记住，jQuery与选择器一样高效，但是你可以将它们用于潜力。

Answer 2

在blur回调的上下文中：

$('[name="'+$(this).attr('id')+'"]').text('foo bar baz');

jQuery - 获取与所选输入的id同名的下一个元素

2 个答案: