Question

是否有一种简单的方法可以找到绝对位置最近的元素。

/*These have come dynamically with jquery*/
  <div class="validationWarning with-triangle::after">Validation Alert</div>


<input id="relative1" type="text" required/>
<input id="relative2" type="text" required/>
<input id="relative3" type="text" required/>
<input id="relative4" type="text" required/>
<input id="relative5" type="text" required/>
<input id="relative6" type="text" required/>
<input id="relative7" type="text" required/>

我一直在使用el.getBoundingClientRect()将绝对元素定位到每个输入：

//...is on.submit
    $("#orderForm :input").each(function(){
     var inputID = $(this).attr("id"); 


    var checking = $(this).val(); 

     if(checking == "")
        {
            var elss = $(this)[0].getBoundingClientRect();
            var leftPos = elss.left + window.scrollX;
            var toptPos = elss.top + window.scrollY;
            $(".validationWarning").css({top: toptPos+40, left: leftPos, display: 'block'});
            $('html, body').animate({scrollTop: $("#"+inputID).offset().top-18}, 500);

            return false; 
        }

现在，当最近的输入位于focus

时，我需要淡出绝对警报div

Answer 1

我认为这将完成你正在寻找的东西。

在当前代码中，当您放置元素时，请执行以下操作：

if(checking == "")
{
    ...

    $(this).after($(".validationWarning")); //ADD THIS LINE

    return false; 
}

这将获取现有的验证警告，并在输入后立即在DOM中移动。它不应该打破你的布局，因为你绝对定位元素。可见元素将放在您放置的位置，但就浏览器而言，它是您输入后的元素。

这意味着您可以添加事件处理程序并执行此操作：

$(":input").on("focus", function() {
    $(this).next(".validationWarning").fadeOut();
});

当您的输入被聚焦时，您将在聚焦输入之后立即抓取元素（如果它与.validationWarning选择器匹配）并淡出它。

有关jQuery docs http://api.jquery.com/after

中.after()的更多信息

Answer 2

您可以将自定义数据属性添加到错误消息工具提示，而不是找到最近的。并且值可以是输入文本框的ID属性。像：

$("#orderForm :input").each(function(){
 var inputID = $(this).attr("id"); 


var checking = $(this).val(); 

 if(checking == "")
    {
        var elss = $(this)[0].getBoundingClientRect();
        var leftPos = elss.left + window.scrollX;
        var toptPos = elss.top + window.scrollY;
        $(".validationWarning").data('targetID', inputID);
        $(".validationWarning").css({top: toptPos+40, left: leftPos, display: 'block'});
        $('html, body').animate({scrollTop: $("#"+inputID).offset().top-18}, 500);

        return false; 
    }

然后在输入文本的焦点上，您可以找到相应的错误工具提示元素，如：

var inputID = $(this).attr('id');
$("div[data-targetID='" + inputID + "']");

找到绝对位置最接近的元素

2 个答案: