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（）的另一个问题是通过找到与选择器无关的语法错误来解决的。但是，在这种情况下，我可以看到我的hightlighter类，如果我只上升一个父级别（仅突出显示编辑器的div），并且如果我爬上3级别（突出显示容器持有完整形式）。

THX

好吧....它不是选择器。所有建议的替换（和原始）都正确地“选择”外部包装div。问题是CSS以及如何将Floats应用于Label和Editor div。此CSS将生成正确的突出显示，并使标签/编辑器字段正确对齐。 [噢]

向你们提供关闭/编辑/重新编辑问题的最佳方式，希望能帮助其他人避免我4小时的故障排除。

- 非常感谢所花的时间 -

Answer 1

可能的解决方案： -

$('.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');
});

Answer 2

您建议的解决方案应该正常工作 $（本）.parent（）父（）; 我认为这里的问题是你的事件在有一个绑定它的对象之前被绑定了。你有没有准备好文件的功能？类似的东西：

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

否则使用'live'或'on'绑定事件将动态工作。所以喜欢：

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

.parent（）的jQuery选择器.parent（）

2 个答案: