JQuery -找不到errorlist的祖先
JQuery - Can't find ancestor of errorlist
我试图使我的表单组显示时,有一些错误后提交。这意味着表单组内部有<ul class="errorlist"...>
。问题是我找不到这个错误列表的祖先,所以我可以"show()"它们。
正如你在下面看到的,首先,我找到了所有类为"errorlist"的元素,然后,我为每个元素找到了类为"main-form-wrapper"的祖先元素。但它的行为就像没有"main-form-wrapper"一样。
这是一个JQuery:
$(document).ready(function () {
$('.main-form-wrapper').hide();
var type_of_user = $('#id-type-of-user').data("type_of_user");
var country = $('#id_country');
refreshFormsVisibility(type_of_user, country);
$('#id_type_of_user,#id_country').on('change', function () {
refreshFormsVisibility(type_of_user, country);
});
$('h4').click(function () {
$(this).siblings(".main-form-wrapper").first().slideToggle("slow");
});
var errors = $('.errorlist');
$.each(errors, function (error) {
alert($(error).closest('.main-form-wrapper').length); // returns 0
$(error).closest('.main-form-wrapper').first().show();
});
});
function refreshFormsVisibility(type_of_user, country) {
$('.form-group-container').hide();
if (type_of_user != '' && country.val() != '') {
$('.show-allways').show();
if (type_of_user == 'person') {
$('.show-personal').show();
} else {
if (country.val() == 'SK') {
$('.show-company-sk').show();
} else {
$('.show-company').show();
}
}
} else {
}
//$(":input:not([type=hidden])").attr('disabled', false);
//$('div > input:hidden').attr("disabled", true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form-contact-information" class="form-group-all form-group-container show-allways col-lg-12 top-margin-half" style="display: block;">
<h4 align="center" class="hand-cursor main-color">Contact information <i>(click to edit)</i></h4>
<hr>
<div class="main-form-wrapper" style="display: block;">
<div>
<div id="email-field-wrapper" class="fieldWrapper">
<label for="id_email">Email:</label>
*
<br>
<input id="id_email" maxlength="40" name="email" type="email" value="email@gmail.com">
<ul class="errorlist"><li>User with this email already exists</li></ul>
</div>
<div id="telephone-field-wrapper" class="fieldWrapper">
<label for="id_telephone">Telephone:</label>
<br>
<input id="id_telephone" maxlength="50" name="telephone" type="text">
</div>
<div id="fax-field-wrapper" class="fieldWrapper">
<label for="id_fax">Fax:</label>
<br>
<input id="id_fax" maxlength="50" name="fax" type="text">
</div>
</div>
<hr class="no-bottom-margin">
</div>
</div>
你知道问题在哪里吗?它没有找到main-form-wrapper,所以我不能show()
它
您应该在$each
中使用$(this).closest()
来访问当前的.errorlist
对象。
$(document).ready(function() {
$('.main-form-wrapper').hide();
var type_of_user = $('#id-type-of-user').data("type_of_user");
var country = $('#id_country');
refreshFormsVisibility(type_of_user, country);
$('#id_type_of_user,#id_country').on('change', function() {
refreshFormsVisibility(type_of_user, country);
});
$('h4').click(function() {
$(this).siblings(".main-form-wrapper").first().slideToggle("slow");
});
var errors = $('.errorlist');
$.each(errors, function(error) {
alert($(this).closest('.main-form-wrapper').length); // returns 0
$(this).closest('.main-form-wrapper').first().show();
});
});
function refreshFormsVisibility(type_of_user, country) {
$('.form-group-container').hide();
if (type_of_user != '' && country.val() != '') {
$('.show-allways').show();
if (type_of_user == 'person') {
$('.show-personal').show();
} else {
if (country.val() == 'SK') {
$('.show-company-sk').show();
} else {
$('.show-company').show();
}
}
} else {
}
//$(":input:not([type=hidden])").attr('disabled', false);
//$('div > input:hidden').attr("disabled", true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form-contact-information" class="form-group-all form-group-container show-allways col-lg-12 top-margin-half" style="display: block;">
<h4 align="center" class="hand-cursor main-color">Contact information <i>(click to edit)</i></h4>
<hr>
<div class="main-form-wrapper" style="display: block;">
<div>
<div id="email-field-wrapper" class="fieldWrapper">
<label for="id_email">Email:</label>
*
<br>
<input id="id_email" maxlength="40" name="email" type="email" value="email@gmail.com">
<ul class="errorlist">
<li>User with this email already exists</li>
</ul>
</div>
<div id="telephone-field-wrapper" class="fieldWrapper">
<label for="id_telephone">Telephone:</label>
<br>
<input id="id_telephone" maxlength="50" name="telephone" type="text">
</div>
<div id="fax-field-wrapper" class="fieldWrapper">
<label for="id_fax">Fax:</label>
<br>
<input id="id_fax" maxlength="50" name="fax" type="text">
</div>
</div>
<hr class="no-bottom-margin">
</div>
</div>
相关文章:
- 如何将事件stopPropagation限制为祖先元素
- 如何测试HTML元素的祖先是否有CSS类
- 如何在不使用multipleparent()调用的情况下找到(元素表的)第一个祖先
- 获取一个元素相对于Javascript中一个祖先的位置
- 检索具有特定数据属性的祖先元素
- jQuery 遍历 -- 查找相对于共同祖先的元素
- 获取看起来像选择器的祖先元素
- 搜索具有共同祖先的项目
- 忽略 JavaScript/ES6 中缺少的祖先 JSON 对象键
- 在事件冒泡阶段删除祖先
- 新添加的元素无法使用 jQuery API closest() 在 DOM 树中向上遍历其祖先,返回“undefined
- 获取父级/祖先 UL
- 使用 jQuery 查找第一个祖先是具有特定类的对象的子级
- 如何获取选择 JS 树节点时的祖先
- Angular 2 子组件接收祖先事件
- Twitter Bootstrap 下拉菜单 - onclick 将“open”类放在祖先 ul 而不是子 ul 上
- 筛选具有特定类作为祖先的元素
- 通过调用祖先函数继承JavaScript
- Vanilla javascript检查元素或祖先是否有类
- JQuery -找不到errorlist的祖先