jQuery-获取与所选输入的ID同名的下一个元素 [英] jQuery - get next element with same name as id of selected input

问题描述

首先，我想为那里的恐怖标题表示歉意，但这是我总结问题的最佳方式.

First off, I'd like to apologize for the horrid title there, but it was the best way I could think of summing up my issue.

当前，我使用jQuery脚本在input:text的blur上检查输入的文本值是否大于特定值.如果不是，则输入将突出显示为红色-但我接下来要在相邻的列中添加<p>来更改其文本.

Currently, I use a jQuery script that checks, on blur on an input:text, that the text value of the input is greater than a certain amount. If not, the input is highlighted red - but what I'd like to happen next, is to have a <p> in an adjacent column to have it's text changed.

我的HTML看起来像这样:

My HTML looks like this:

<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是:

And my jQuery/css is :

<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上以某种方式调用与所选输入的id相同的name的下一个元素，然后更改其文本?我知道这必须解决一个棘手的动态难题，但这是我真正需要的.

Is it possible, on blur to somehow call the next element with the same name as the selected input's id, and then change it's text? I know this must be a tough dynamic puzzle to solve, but it's something I really need.

过去，我通过对每个元素重复执行代码来达到相同的效果，但这在这里并不是很合适.

In the past, I achieved the same effect by repeating the code for every element, but that's not really suitable here.

谢谢您能给我的任何建议！

Thank you for any advice you can give me!

推荐答案

zzzzBov是正确的，但是最好使用上下文来提高效率和/或标记名.另外，添加一个引用$(this)的变量.

zzzzBov is correct however it would be better to use a context to improve efficiency and/or a tagname. In addition add a variable that references $(this).

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

---

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

---

Edited after comment The difference between above and zzzzBov's answer is:

$('[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与选择器一样高效，但是取决于您如何发挥选择器的作用.

Generally speaking being more specific with jQuery selectors can improve preformance. In addition using variable to store selected elements such as var $this = $(this); or var $myElement = $('#myElement') is more efficient than creating the same selectors over and over. Remember jQuery is as efficient as it can be with the selectors but it is up to you to use them to thier potential.

这篇关于jQuery-获取与所选输入的ID同名的下一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！