JQuery parent 选择器查找步骤

Question

我正在使用 jquery 步骤控件。表单发布在 onFinished() 事件中，并触发了 Ajax 请求。如果发生任何验证错误，我会从服务器 return 执行以下操作：

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

接下来在 jQuery 中我找到合适的跨度元素（使用 ASP.NET MVC 的 @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 步骤 header 设置为红色，以表明该步骤发生了验证错误。这部分不工作：

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");

这应该给我直接在 <section> 内的 <div>，但它似乎没有。如果我记录这个 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

尝试 .parents() 而不是 .parent()。更好的是，试试 .closest().

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

.parent() 仅在直接父级上查找。

.closest() 查找元素本身和祖先 return 第一个匹配给定选择器的元素。

JQuery parent 选择器查找步骤

JQuery parent selector to find step

html

javascript

asp.net-mvc

jquery

jquery-steps