Селектор jQuery для .parent (). parent ()

Question

Учитывая последовательность элементов Label и Input формы, таких как:

<div class="labelEditwrap">
    <div class="editor-label">
       <label for="Address">Address</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="Address" name="Address" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Address"></span>
    </div>
</div>

Я пытаюсь выбрать самый внешний div, когда текстовое поле получает фокус, чтобы я мог выделить как метку, так и ввод:

$("input").focus(function () {
    $(this).parent().parent().addClass("curFocus")
});

Я пробовал несколько комбинаций, включая:

$(this).parent().parent() // seems the most obvious
$(this).parent().parents("div:first")

Еще один вопрос, касающийся .parent (). Parent (), был решен путем обнаружения синтаксической ошибки, не связанной с селектором.Тем не менее, в этом случае я могу увидеть свой класс хайлайтеров, если поднимусь только на один родительский уровень (выделяется только div редактора), а также если я поднимусь на 3 уровня (выделит контейнер, содержащий полную форму).

THX

ОК .... это не селектор.Все предложенные альтернативы (и оригинал) правильно «выбирают» внешнюю оболочку div.Проблема заключалась в CSS и в том, как Float применяются к элементам Label и Editor.Этот CSS будет производить правильное выделение, а также позволяет полям меток / редакторов выравниваться правильно.[whew]

Вам, ребята, лучший способ закрыть / отредактировать / переименовать вопрос в надежде помочь другим избежать моего 4-часового испытания двойного выстрела.

- высоко цените затраченное время1018 *

Answer 1

Решение, которое вы предложили, должно работать правильно $ (this) .parent (). Parent ();Я думаю, что проблема заключается в том, что ваше событие связано до того, как появится объект для его привязки.Вы связали свою функцию с готовым документом?Примерно так:

$(function(){
    $("input").focus(function () {
        $(this).parent().parent().addClass("curFocus")
    });
});

В противном случае использование «live» или «on» для привязки события будет работать динамическитак как:

$('input').live('focus', function(){
    $(this).parent().parent().addClass("curFocus");
});

Answer 2

Возможные решения: -

$('.text-box').live('focus', function(){
       $(this).parent().parent().css('border', '1px solid red');
});

$('.text-box').live('blur', function(){
  $(this).parent().parent().css('border', 'none');
});

или

$('.text-box').bind('focus', function(){
  $(this).parent().parent().css('border', '1px solid red');
});

$('.text-box').bind('blur', function(){
 $(this).parent().parent().css('border', 'none');
});