如何识别错误标签的位置

how to identify the position of the error tag

本文关键字：错误 标签 位置 识别 何识别      更新时间：2023-09-26

试图获得DOM中错误标记的位置。基于我需要设置代码属性的位置。如何获得查找p.error.位置的通用方法

以下是尝试的内容：

场景1:

<div class="col-xs-6"> 
    <label> email </label> 
    <p class="error">Please enter E-mail</p>
    <input type="email" value=""> 
</div>
<div class="col-xs-6"> 
    <label> password </label> 
    <p class="error">Please enter password</p>
    <input type="password" value=""> 
</div>

场景2:

<div class="col-xs-6"> 
    <label> email </label> 
    <input type="email" value=""> 
    <p class="error">Please enter E-mail</p>
</div>
<div class="col-xs-6"> 
    <label> password </label> 
    <input type="password" value=""> 
    <p class="error">Please enter password</p>
</div>

在场景1中，p.error的位置位于输入的顶部。并且在场景2中，它在输入字段的下方。

现在，找到位置的通用方法是什么，是低于还是高于。

previous = $("p.error").prev();
next = $("p.error").next();
previous.on('focusin', function(ev) { });
previous.on('keydown',function(ev) {
    $(this).prev().attr({
        'role': 'xyz',
    });
});
next.on('focusin', function(ev) {
    $(this).prev().attr({
        'role': 'xyz',
    });  
});

您可以通过检查上一个和下一个的tagName属性

previous[0].tagName.toLowerCase() === 'input'; // error is after
next[0].tagName.toLowerCase() === 'input'; // error is before

另一种解决方案是在next((方法中使用input标记作为选择器，如下所示：

$('p.error').next('input').length > 0; // error is before
$('p.error').prev('input').length > 0; // error is after
相关文章：