Ошибка cannot read property 'id' of undefined

272

16 апреля 2017, 01:38

Всем привет. В jq я не силен, скажу сразу :)

Имеется Jq код который получает данные как я понимаю с блока:

var nextD = $('.check-item[data-id="' + currentID + '"]').next().data().id;

Имеется этот же блок:

<div data-id="'.$list[3].'" class="check-item">'.$Name1.' - '.$Name2.'</div>

Если оставить так, все работает, данные получаются, но если я хочу перед блоком добавить еще один блок:

<div clas="ddd">'.$j.'</div> <div data-id="'.$list[3].'" class="check-item">'.$Name1.' - '.$Name2.'</div>

То получаю ошибку Uncaught TypeError: Cannot read property 'id' of undefined которая ссылается на кусок кода который я привел в начале. Почему так происходит?

Answer 1

Судя по всему у тебя генерируется много однотипных элементов

<div data-id="'.$list[3].'" class="check-item">'.$Name1.' - '.$Name2.'</div>

а метод next() берет следующий за выбранным селектором $('.check-item[data-id="' + currentID + '"]') элемент далее по DOMу. И как раз таки тот что ты добавил между элементами .check-item не имеет data-id собственно поэтому и undefined. Если ты добавишь этому элементу data-id то ошибки не возникнет. Если data-id тебе ставить не нужно для этого элемента, то укажи в next() какой именно элемент тебе нужен:

$('.check-item[data-id=' + currentID + ']').nextAll("div[data-id].check-item:first").attr('data-id');

$(document).ready(function() { 
  var currentID = 4; 
  var nextD = $('.check-item[data-id=' + currentID + ']').nextAll("div[data-id].check-item:first").attr('data-id'); 
  alert(nextD); 
})

.check-item { 
  margin: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div data-id="1" class="check-item">some name</div> 
<div data-id="4" class="check-item">some name</div> 
<div class="check-item">o</div> 
<div data-id="ds">some without class</div> 
<div data-id="8" class="check-item">some name</div> 
<div data-id="2" class="check-item">some name</div> 
<div data-id="5" class="check-item">some name</div> 
<div data-id="9" class="check-item">some name</div>