CSS 访问输入上的顶部标签元素答案

【问题标题】：CSS Access top label element on an inputCSS 访问输入上的顶部标签元素
【发布时间】：2017-05-04 11:37:17
【问题描述】：

我目前正在尝试设置标签样式以在遇到验证问题时更改其颜色。

<label>
<input id="single-select" class="apply-form-multi-select required errorField" type="radio" name="question_3897788" style="background-color: rgb(0, 255, 0); color: red;">
Option 2
</label>

大部分信息是动态生成的。我的目的是访问顶部，以便更改“选项 2”文本的颜色。

我目前有以下：

$('input[name='+i+'].errorField.apply-form-multi-select').css("color", "red");

但这只会给我输入字段。关于如何访问标签的任何想法？

【问题讨论】：

你的标签元素包含一个文本和一个输入元素你真的需要吗？？如果您正在执行一些错误字段验证，或者您是否需要在屏幕中显示一些错误消息，那么您可以在顶部使用一个常见的错误 div，然后在该 div 或 span 中注入您的错误消息。如果您只想要错误消息在有问题的字段下方，然后尝试使用 append 方法将您想要的任何内容附加到适当的元素中。如果您真的喜欢您所讨论的方式，然后在另一个标签标签中写入选项二，并为该标签提供一个 id 或名称那么你会得到一个合适的合作伙伴
我认为 .parents('label').css('color','red') 会改变标签内整个事物的颜色。例如，如果标签内有一个按钮，那么上面的代码也会改变按钮文本的颜色

标签： java html css

【解决方案1】：

您可以尝试将.parent() 附加到与匹配标签正上方的标签匹配的末尾。

$('input[name='+i+'].errorField.apply-form-multi-select').parent().css("color", "red");

感谢Amit kumar，这是一个确保父元素是标签的解决方案

如果你想确保.parent() 匹配label 元素，你可以给它一个选择器作为参数。例如，.parent("label")。

【讨论】：

或 $('input[name='+i+'].errorField.apply-form-multi-select').parents('label').css("color", "red" );
@Amitkumar 这也有效！你想让我把它纳入我的答案还是你想自己做？
你可以合并:)
@Amitkumar 好的，我已经这样做了——我使用了.parent() 而不是.parents()，因为它看起来更有效（可能不会有嵌套标签）。
非常感谢大家，这解决了我的问题。