Задать вопрос
@pcdesign

Как получить data-id ближайшего предыдущего элемента?

<table>
  <tr class="header" data-id="target">
	<td></td>
  </tr>
  <tr>
	<td></td>
  </tr>
  <tr>
	<td></td>
  </tr>
  <tr class="header" data-id="target2">
	<td></td>
  </tr>
  <tr>
	<td></td>
  </tr>
  </table>


У меня есть индекс строки в таблице.
Надо крутить наверх от текущего индекса до тех пор, пока не наткнемся на элемент с классом header. И как только наткнемся, выдернуть его атрибут data-id.

Например, для index = 1 должен быть id = "target1".
Если index = 4, тогда должен получится id = "target2".
  • Вопрос задан
  • 84 просмотра
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
О каких индексе, классе и data-атрибуте идёт речь:

const index = вам виднее, что тут должно быть;
const className = 'header';
const selector = `.${className}`;
const key = 'id';
const attr = `data-${key}`;

Если у элементов общий родитель (const parentSelector = 'table tbody';):

const $elements = $(parentSelector).children();
const $el = $elements.eq(Math.min(index, $elements.length - 1));
const val = ($el.is(selector) ? $el : $el.prev(selector)).attr(attr) ?? null;

// или

const elements = document.querySelector(parentSelector).children;
let val = null;
for (let i = Math.min(index, ~-elements.length); i >= 0; i--) {
  if (elements[i].matches(selector)) {
    val = elements[i].getAttribute(attr);
    break;
  }
}

Если родители элементов (const elementsSelector = 'table tr';) разные (конкретно в вашем случае это могла бы быть таблица с несколькими tbody):

const val = $(elementsSelector)
  .slice(0, index + 1)
  .filter(selector)
  .last()
  .data(key) ?? null;

// или (UPD. На момент публикации вопроса метод findLast отсутствовал,
//           вместо него использовалась связка из reverse-find)

const { [key]: val = null } = Array
  .from(document.querySelectorAll(elementsSelector))
  .slice(0, -~index)
  .findLast(n => n.classList.contains(className))
  ?.dataset ?? {};
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы