jQuery - получить следующий элемент с тем же именем, что и идентификатор выбранного входа

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');