1

Всем привет. В 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 которая ссылается на кусок кода который я привел в начале. Почему так происходит?

2
  • убери вызов next. Имеется Jq код который получает данные как я понимаю с блока - получает данные из элемента после выбранного
    – Grundy
    14 апр 2017 в 17:17
  • @Grundy я бы с удовольствием убрал, но у меня генерируется 20 однотипных элементов в которых меняется лишь data-id и мне нужно по очереди получать их значения
    – Muday
    14 апр 2017 в 19:50

2 ответа 2

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>

2
  • Вы правы, ошибка больше не появляется, но Jq начал брать непонятно откуда значения data-id. Далеко не те, которые указаны в .check-item
    – Muday
    14 апр 2017 в 19:48
  • Спасибо, ваш вариант оказался рабочим. Можно на последок задать один вопрос. А если я захочу <div data-id="2" class="check-item">some name</div> заключить в <ol>. Что бы получилось <ol><div data-id="2" class="check-item">some name</div></ol>, как быть в таком случае? тогда ваш код перестает работать)
    – Muday
    18 апр 2017 в 15:32
0

$(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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.