Как получить элементы до ID или класса?

Question

[xxvxx]

Есть структура

<ul>
   <li>
   <li>
   <li>
   <li id="item">
   <li>
   <li>
</ul>

Как получить все элементы li до id="item" на JS

Comments

[edward_freedom]

получи всех детей ul и в цикле проверь наличие id

[xxvxx]

edward_freedom, нет пойдет после же нет id и они мне нужны в JS можно получить соседние элементы но там именно соседние.... previousElementSibling

[edward_freedom]

xxvxx, что мешает после обнаружения элемента с ид прервать цикл?

[xxvxx]

edward_freedom, кстати да =)) ваш вариант мне нравится больше, чем если перебирать через previousElementSibling пока не будет null

Answer 1

[0xD34F]

Где элементы находятся, какой id выступает в роли ограничителя:

const parent = document.querySelector('ul');
const id = 'item';

Получаем элементы:

const elems = Array.from(parent.children);
const index = elems.findIndex(n => n.id === id);
const result = index === -1 ? elems : elems.slice(0, index);

// или

const result = [...parent.querySelectorAll(`:not(#${id}, #${id} ~ *)`)];

// или

const result = [];
for (
  let el = parent.firstElementChild;
  el && el.id !== id;
  el = el.nextElementSibling
) {
  result.push(el);
}

Answer 2

[KaneUA]

Есть как минимум два способа это сделать

1. Перебирать элементы от текущего и до начала родительского тега, используя свойство previousSibling. Ссылка на документацию в MDN.

// Находим элемент с нужным id
let currentElement = document.getElementById("item");
// Создаём массив для элементов
let allElements = [];
// Пока у нас есть элемент, с которым можно работать, продолжаем это делать
while(currentElement) {
   // Добавляем текущий элемент в массив
   allElements.push(currentElement);
   // Получаем предыдущий соседний элемент.
   // Если такого нет, то будет null и цикл прервётся
   currentElement = currentElement.previousSibling;
}

2. Найти родительский элемент и перебирать дочерние элементы, пока не найдём с нужным id. Документация на MDN по parentElement и children.

// Элемент, от которого отталкивается
let startingElement = document.getElementById("item");
// Его родитель
let parentElement = startingElement.parentElement;
// Массив для элементов
let allElements = [];
// Перебираем дочерние элементы
for(let i = 0; i < parentElement.children; i++) {
   // Добавляем перебираемый элемент в массив
   allElements.push(parentElement.children[i]);
   // Проверяем, соответствует ли id искомому
   if(parentElement.children[i].id === "item") {
      // Если да, прерываем цикл
      break;
   }
}