使用特定输入将类添加到父 div答案

【问题标题】：Add class to parent div with specific input使用特定输入将类添加到父 div
【发布时间】：2014-08-10 18:31:46
【问题描述】：

我有以下情况：

<div class="control-group">
  <label class="control-label" for="first_name">
    First name
  </label>
  <div class="controls">
    <input id="first_name" type="text" value="rybka">
  </div>
</div>

我有输入的 ID。我想使用“控制组”类将类添加到 div 并使用指定的 id 输入。如果是完美的方法呢？

编辑：

感谢我使用该解决方案的所有答案：

$(".control-group:has(#specificId)").addClass('yourClass');

【问题讨论】：

嘿，您应该最接近必须提高性能，请参阅我的答案...

标签： jquery

【解决方案1】：

尝试在此上下文中使用:has() 选择器，

$(".control-group:has(#specificId)").addClass('yourClass');

或者你也可以使用.closest()

$("#specificId").closest(".control-group").addClass('yourClass');

【讨论】：

感谢您的回答。我使用了你的解决方案。
@user2239655 很高兴为您提供帮助！

【解决方案2】：

使用.parents() 获取所有父元素，使用.addClass() 为元素添加类。试试这个：

$("#first_name").parents(".control-group").addClass("testClass");

DEMO

【讨论】：

+1，尽管您不需要选择器中的那些元素名称：$("#first_name").parents(".control-group")
@feeela：已更新。谢谢:)

【解决方案3】：

我已经为你的问题创建了 jsfiddle，你应该 closest 代替 has。 closest 的工作速度比 has 方法查看代码和为它工作的 jsfiddle 更快。

代码：-

$(document).ready(function() {
    console.time("has")
    $(".control-group:has(#first_name)").addClass('yourClass');
    console.timeEnd("has")

    console.time("closest")
    $("#specificId").closest(".control-group").addClass('yourClass');
    console.timeEnd("closest")

});

工作 jsfiddle 示例：-http://jsfiddle.net/dwxmjkb3/13/

在控制台上查看结果。

谢谢

【讨论】：

【解决方案4】：

没有完美的方法，但有很多方法可以做到这一点。我假设您要添加在输入中添加的类。

$('input').change(function () {
    $(this).parent().parent().addClass('someclass');
});

这会一直回到最高父级并添加类。

【讨论】：