Question

我正在使用jquery步骤控件。表单将发布在onFinished()事件中，并且会触发Ajax请求。如果发生任何验证错误，我将从服务器返回以下内容：

{
    "ErrorMessages": 
        [{
            "PropertyName":"Complainant.Address.StreetName",
            "ErrorMessage":"The complainant street name is required."
        },
        {
            "PropertyName":"Complainant.Address.Suburb",
            "ErrorMessage":"The complainant suburb is required."
        }]
}

接下来在jQuery中，我找到了适当的span元素（使用ASP.NET MVC＆＃39; s @Html.ValidationMessageFor创建），并为其提供了提供的验证消息：

if (response.ErrorMessages != null) {
    for (var i = 0; i < response.ErrorMessages.length; i++) {
        var validationSpan = $("span[data-valmsg-for='" + response.ErrorMessages[i].PropertyName + "'");
        validationSpan.html(response.ErrorMessages[i].ErrorMessage);
        validationSpan.removeClass("field-validation-valid");
        validationSpan.addClass("field-validation-error");
    }
}

下一步是将Jquery步骤标头设置为红色，以显示该步骤发生了验证错误。这部分不起作用：

var section = validationSpan.parent(".step-div");
$("#steps-uid-0-t-" + section.attr("step")).css("background", "#ff3111");

我有以下html结构：

<div>
    <h1>Complaint details</h1>
    <section>
        <div class="step-div" step="0">
            <div class="form-group">
                @Html.LabelFor(model => model.Complainant.Address.StreetName, new { @class = "col-md-3 control-label" })
                <div class="col-md-8">
                    @Html.TextBoxFor(model => model.Complainant.Address.StreetName, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Complainant.Address.StreetName)
                </div>
            </div>
        </div>
    </section>
<div>

似乎无法正常工作的部分：

var section = validationSpan.parent(".step-div");

这应该直接在<div>内给我<section>，但它似乎没有。如果我记录这个section变量，我会得到以下结果：

{ length: 0, prevObject: Object, context: HTMLDocument ? 134 }

我想要将样式应用的渲染<a>元素看起来像这样（取决于它是哪个步骤）：

第1步：

<a id="steps-uid-0-t-0" href="#steps-uid-0-h-0" aria-controls="steps-uid-0-p-0"><span class="number">1.</span> Complainant details</a>

第2步：

<a id="steps-uid-0-t-1" href="#steps-uid-0-h-1" aria-controls="steps-uid-0-p-1"><span class="number">2.</span> Complaint details</a>

Answer 1

尝试使用Text='<%# Eval("Time", "{0:hh\:mm}") %>'代替.parents()。更好的是，试试.parent()。

.closest()获取与给定选择器匹配的所有祖先。

.parents()仅查找直接父级。

.parent()查找元素本身和祖先以返回与给定选择器匹配的第一个元素。

JQuery父选择器找到步骤

1 个答案: