Question

Heyo。这是我的第一个堆栈溢出帖子，因为我很难过并且找不到很多想要完成同样事情的人。我尝试使用jquery .before（）,. after（）和.wrap（）来解决这个问题。我最初使用的是css：before和：after伪元素，但由于这对旧版浏览器不起作用，我决定使用jquery。

我已经在几个页面上有几个表单，验证工作正常。错误消息的长度不同。我们在默认的span元素上使用静态的单一尺寸背景图像，因此内容在更长的错误消息上流失。我构建了一个灵活的圆角系列嵌套div，以允许错误框动态增长或缩小。我要输出的html是：

<div class="errorWrap">
<div class="errorTop"><span></span></div>
<div class="errorContent">
    <span class="error">This is an error</span>
</div>
<div class="errorBottom"><span></span></div>
</div>

以下是我尝试过的解决方案示例，但我仍然是javascript的新手。

 $('.error').before('<div class="errorWrap"><div class="errorTop"><span></span></div><div class="errorContent">');
 $('.error').after('</div><div class="errorBottom"><span></span></div></div>');

如果我错了，请纠正我，但我认为我对jquery有正确的想法。但它只是坐在那里，而不是任何被调用的函数。所以我想，既然代码没有重新执行，它就不会显示出来。是否有适当的功能来包装它？我确定我只是没有从正确的方向攻击这个。任何帮助都非常感激。

Answer 1

插件“之前”和“之后”不要将html作为字符串。你不能在一个div中启动div并在另一个中关闭它。

您可以使用当前的html并生成一个新的html字符串，并将其添加到您想要的位置，或者使用“wrap”插件http://api.jquery.com/wrap/

使用纯HTML

$(".error").html("<div class='beforeContent'>" + $(".error").html() + "</div>");

使用wrap （http://api.jquery.com/wrap/）

$(".error").wrap("<div class='beforeAndAfter'></div>");

Answer 2

如果你想在焦点输出后显示一个错误div，那么你必须使用html / wrap创建它，因为Luke说，然后你必须将它添加到dom使用

$('.errorWrap').insertAfter('.focusedElement');

但还有其他方法可用于插入新元素，如append / appendTo e.t.c，

Answer 3

我最终使用jquery自行修复此问题来创建div并且它在pageload上嵌套，div生成的错误类为display：none。自定义errorPlacement函数将错误嵌入正确的div中。然后我使用自定义验证器突出显示函数来删除隐藏元素的类。然后我使用unhighlight函数重新添加类来重新隐藏div。

$(function() {
    //Generate the elements and assign attributes
    var errorWrap = document.createElement('div');
    $(errorWrap).addClass('errorWrap hideError');
    var errorTop = document.createElement('div');
    $(errorTop).addClass('errorTop');
    var topSpan = document.createElement('span');
    var errorContent = document.createElement('div');
    $(errorContent).addClass('errorContent');
    var errorBottom = document.createElement('div');
    $(errorBottom).addClass('errorBottom');
    var bottomSpan = document.createElement('span');

    //Place the elements directly after each dd element
    $("dl > dd").append(errorWrap);
    $("div.errorWrap").append(errorTop)
        .append(errorContent)
        .append(errorBottom);
    $("div.errorTop").append(topSpan);
    $("div.errorBottom").append(bottomSpan);

    //Add custom validator defaults
    $.validator.setDefaults({
        errorPlacement: function(error, element) {
            $(element).nextAll('.errorWrap').children('.errorContent').append(error);
        },
        highlight: function(element) {
            $(element).nextAll('.errorWrap').removeClass('hideError');
        },
        unhighlight: function(element) {
            $(element).nextAll('.errorWrap').addClass('hideError');
        }
    });

}

虽然我确信这可以做得更简单，但我真的很喜欢这种技术，因为我不需要更新任何包含表单的页面来使其工作。所有嵌套的div都是由javascript动态创建的，所以我可以将一个全局文件包含到任何带有表单的页面中，它就可以正常工作。感谢所有提出建议的人。

包装jquery验证带有嵌套div的span.error

3 个答案: