选择上一个标签元素 JQUERY答案

【问题标题】：Selecting previous label element JQUERY选择上一个标签元素 JQUERY
【发布时间】：2019-11-13 22:55:43
【问题描述】：

所以我有一个表格；

<label for="name">Job Date</label><br /><input id="name" class="required" title="Enter a name!" name="name" type="text" />

还有一些 Jquery 以“必需”类循环遍历每个输入，看看它是否为空/空白，如果是，则给这个输入一个红色边框颜色，以及与之关联的标签一个红色；

function checkreview()
    {   
        var errors = "";
        $(".required").each(function (i) 
        {
            if($(this).val() == "")
            {
                errors += $(this).attr('title')+'<br />';
                $(this).css('border-color','#FF0000');
                //need to select previous label and set color to red                
            }

        });


}

所以我需要一个选择器来选择前一个标签并允许我给它 .css('color','FF0000')。

知道如何在 JQUERY 中选择上一个标签吗？

【问题讨论】：

标签： jquery

【解决方案1】：

如何使用输入字段的 id 选择相应的标签。所以无论标签在哪里，您都可以找到它。

将您的评论替换为：

$('label[for="'+ $(this).attr('id') +'"]').css('color','#FF0000');

【讨论】：

这是我最初的想法，但是这行不通，我真的认为它应该这样，所以我要更深入地研究它，看看它没有其他东西阻止它。
它对我有用。也许还有其他问题？ $('label[for="name"]') 适合你吗？
我的意思是，$('label[for="name"]') 返回什么？
OK 问题解决了，问题是我错过了颜色十六进制代码中的#！！

【解决方案2】：

你试过了吗：

$("input").prev("label").css('color','FF0000')

【讨论】：

是的，我尝试过使用； $(this).prev("label").css('color','FF0000') 不高兴，谢谢。

【解决方案3】：

由于在输入元素之前有一个<br /> 元素，因此您不能使用prev()。

怎么样

$("input").prevAll("label").css('color','FF0000');

或者你可以选择带有for属性的label元素

$("input").prevAll("label[for=" + $("input").attr ( 'id' ) + "]").css('color','FF0000');

prevAll：查找当前元素前面的所有兄弟元素。

【讨论】：

【解决方案4】：

$(this).prev().prev().css('color','FF0000');

但我会使用 css 类而不是使用 jQuery 应用样式：

<style>
div.form label {display:block;}
label.error {color:FF0000}
input.error {border-color:FF0000}
</style>

<div class="form">
<label for="name">Job Date</label>
<input id="name" class="required" title="Enter a name!" name="name" type="text" />
</div>

验证将更改为：

function checkreview()
{   
        var errors = "";
        $(".required").each(function (i) 
        {
                if($(this).val() == "")
                {
                        errors += $(this).attr('title')+'<br />';
                        $(this).addClass("error");
                        $(this).prev().addClass("error");    
                }

        });
}

【讨论】：

我尝试了 prev().prev() 但仍然不高兴，输入框边框肯定会改变。

【解决方案5】：

试试这个：

$('label[for='+ $(this).attr('id') +']').css('border','#ff0000 1px solid');

或将标签边框样式添加到 CSS 中，因为除非您设置了边框类型，否则您看不到边框颜色... label[for=ID] 确实可以按照之前的回答.

【讨论】：