.parent().parent() 的 jQuery 选择器答案

【问题标题】：jQuery selector for .parent().parent().parent().parent() 的 jQuery 选择器
【发布时间】：2012-01-04 19:11:29
【问题描述】：

给定一系列表单的 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 级（突出显示包含完整表单的容器），我可以看到我的 hightlighter 类。

谢谢

好的....它不是选择器。所有建议的替代品（和原件）都正确地“选择”了外部包装器 div。问题在于 CSS 以及如何将浮点数应用于标签和编辑器 div。此 CSS 将产生正确的突出显示，并让标签/编辑器字段正确对齐。 [呼]

关闭/编辑/重命名问题的最佳方式取决于你们，希望能帮助其他人避免我的 4 小时故障排除磨难。

-非常感谢所花费的时间-

【问题讨论】：

JQuery Parent() selector的可能重复
OK....它不是选择器。所有建议的替代品（和我的原件）都正确地“选择”了外部包装器 div。问题是如何将浮点数应用于标签和编辑器 div：

标签： jquery-selectors

【解决方案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');
});

【讨论】：

【解决方案2】：

您建议的解决方案应该可以正常工作 $(this).parent().parent(); 我认为这里的问题是您的事件在绑定对象之前就被绑定了。您是否已准备好将您的功能绑定在文档上？比如：

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

否则使用 'live' 或 'on' 绑定事件将动态工作。比如：

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

【讨论】：