Ошибка в работе скрипта JQuery (uncaught TypeError: Cannot read property 'attributes' of undefined)
Доброго времени суток.
На странице есть
<div class="form-select" id="0">
<select name="select-category" id="select-category" onchange="selectCategory(this.id)">
...
</select>В него выгружаются главные категории. При выборе одной из них - я передаю значение на сервер через ajax, и после получения json - создаю ещё один селектор (в этом селекторе дочерние категории), помещенный в такой же div, но с значением атрибута id больше на единицу и т.д.
При изменении выбора в select на любом уровне, я получаю атрибут id у .form-select, в который он завернут, после чего прохожусь по всем .form-select, и если у них id больше, то удаляю их.
...
var parent = $('#' + name_id_category).parent();
var parent_id = parent.attr('id');
$('.form-select').each(function (i) {
if (parseInt($('.form-select')[i].attributes.id.value) > parent_id) {
$('.form-select')[i].remove();
}
});
...Но это работает не правильно. После выбора нескольких категорий (на странице 4 селектора), я меняю самый первый из них, удаляются все, кроме предпоследнего, в консоли ошибка:
Uncaught TypeError: Cannot read property 'attributes' of undefined
P.S. Уже очень долго парюсь над этим и конкретно так встрял. Возможно мое решение в целом неудачное, буду рад совету и помощи. Заранее спасибо.
Ответы (1 шт):
во-первых, перестаньте писать костыли вида onchange в html-коде. jquery явно не для этих целей создавался, а чтобы наоброт оделить js от верстки.
во-вторых, ваши номера в id это по сути данные, а не идентификатор. Вот и используйте для хранения data- атрибуты. То есть:
<div class="form-select" data-id="0">
дайте всем своим селектам класс .select-category
добавьте обработчик стандартным для jquery путем
$(document).on('change', '.select-category', function(){
...
});
где вместо document вы используете ближайшего подходящего общего предка для всех ваших селектов.
Далее при смене селекта берете ближайший .form-select и его id и фильтруете все, что не подходит по условию. затем удаляете.
let fsId = $(this).closest('.form-select').data('id');
$('.form-select').filter(function(el){
return $(el).data('id') > fsId;
})
.remove();
в принципе не было бы ошибкой, наверное, и просто удалить все подходящие, которые стоят позже в DOM, вроде такого
let idx = $(".form-select").index($(this));
$(".form-select").gt(idx).remove();