Javascript 使用嵌套div包装jquery验证span.error

嗨。这是我的第一篇堆栈溢出帖子，因为我被难住了，没有找到很多人试图完成同样的事情。我已经尝试使用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的想法是正确的。但它只是坐在那里，而不是在任何被调用的函数中。所以我想，既然代码没有重新执行，它就不会出现。有没有合适的函数来包装这个？我肯定我只是没有从正确的方向攻击它。非常感谢您的帮助。

之前和之后的插件都不使用html作为字符串。不能在一个分区中启动div，在另一个分区中关闭div

您可以获取当前的html并生成一个新的html字符串，将其附加到您想要的位置，或者使用wrap插件

使用纯HTML

使用包裹http://api.jquery.com/wrap/

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

---

如果您想在焦点离开输入后显示错误div，那么您必须使用Luke所说的html/wrap创建它，然后您必须使用

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

---

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

我最终自己解决了这个问题，使用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动态创建的，因此我可以在任何带有表单的页面中包含一个全局文件，这样就可以正常工作了。感谢所有提供建议的人。

当您调用函数或尝试应用样式时，dom中是否存在错误div？如果它是初始加载时任何现有错误类跨度的一次性事件，则需要将其包装在jQuery的.ready函数中。如果页面上的事件触发此事件，则需要其他事件处理程序。否。我想实际动态地创建和删除包含错误范围的元素。类似于创建错误范围的方式。谢谢。我们让验证器实时工作。错误消息将在您键入时显示或隐藏。这不是一次性的。它应该是实时的，和验证器一样。谢谢。但是我应该把这个放在哪里呢？我假设在验证函数结束时，错误立即显示出来？

$(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');
        }
    });

}