0

Есть некая разметка:

<div class='a' id='parent-1'>
    <div class='b' id='child-1'></div>
    <div class='c'>
        <div class='b' id='child-2'></div>
    </div>
    <div class='b' id='child-3'></div>
    <div class='a' id='parent-2'>
        <div class='b' id='child-4'></div>
        <div class='b' id='child-5'></div>
    </div>
</div>

Необходимо получить ближайшие дочерние элементы .b родителя .a.

Например, для родителя #parent-2 должны быть получены #child-4 и #child-5, а для родителя #parent-1 только #child-1, #child-2 и #child-3, исключая дочерние элементы вложенного родителя.

При этом вложенность элементов может быть любой глубины.

Желательна реализация на чистом JavaScript.


Моя текущая реализация на jQuery (Полагаю что есть решению лучше):

const A = $('.a#parent-1');
$(A).find('.b').filter((_, e) => $(e).closest('.a').is(A));
7
  • parent.querySelectorAll('.b')
    – Dmytro
    Commented 21 окт. 2019 в 8:05
  • @Дмытрык тогда выдаст все дочерние элементы. Даже те, которые принадлежать другому вложенному родителю. Commented 21 окт. 2019 в 8:06
  • согласен. Надо подумать)
    – Dmytro
    Commented 21 окт. 2019 в 8:07
  • так вроде children просто. $('.a#parent-1').children('.b') Commented 21 окт. 2019 в 8:18
  • ну, вообще, взять дочерние эл-ты в js можно как-то так: document.getElementById("parent-1").childNodes
    – InDevX
    Commented 21 окт. 2019 в 8:27

2 ответа 2

2

Можно попробовать сделать так. Создаёт результирующий объект с ключами в качестве id родителя (с любой вложенностью). Ну это на JS, без JQuery:

UPD дополнил код, согласно комментам

let aCont = document.querySelectorAll('.a');
let childItems = {};
[...aCont].forEach(items => {
  childItems[items.id] = [...items.children].filter(item => {
    return item.id.indexOf('parent') === -1;
  });
});

console.log(childItems);
<div class='a' id='parent-1'>
    <div class='b' id='child-1'></div>
    <div class='b' id='child-2'></div>
    <div class='b' id='child-3'></div>
    <div class='a' id='parent-2'>
        <div class='b' id='child-4'></div>
        <div class='b' id='child-5'></div>
    </div>
</div>

let aCont = document.querySelectorAll('.a');
let childItems = {};
[...aCont].forEach(items => {
  childItems[items.id] = getChildNodes([...items.children]);
});

console.log(childItems);

function getChildNodes(parentItem) {
  let result = [];
  parentItem.forEach(item => {
    if (item.id.indexOf('parent') !== -1) return;
    if (!item.children.length) {
      if (item.id.indexOf('child') !== -1) {
        result.push(item);
      } 
      return;
    }
    result = result.concat(getChildNodes([...item.children]))
  });
  return result;
}
<div class='a' id='parent-1'>
    <div class='b' id='child-1'></div>
    <div class='c'>
        <div class='b' id='child-2'></div>
    </div>
    <div class='b' id='child-3'></div>
    <div class='a' id='parent-2'>
        <div class='b' id='child-4'></div>
        <div class='b' id='child-5'></div>
    </div>
</div>

5
  • При такой разметке - да, работает. Но, как я указал в посте, вложенность элементов может быть разной. Например #child-2 может быть обернут еще каким-нибудь элементом и в таком случае записан в массив он не будет. Commented 21 окт. 2019 в 8:32
  • Для примера обновил разметку в главном посте. Commented 21 окт. 2019 в 8:36
  • @EssleJaxcate ок, спасибо, сейчас подумаем. Просто про вложенность подумал что может быть внутри только дивы с классном a и id parent-... на бесконечную глубину! а не с рандомными классами еще) Commented 21 окт. 2019 в 8:38
  • @EssleJaxcate дополнил ответ. Просто через рекурсию определяем и соединяем массив с разделением на родителей и проверкой является ли элемент тем который нам нужен в принципе! Commented 21 окт. 2019 в 9:03
  • спасибо, но я решил просто перевести свой вариант на чистый JS. Получилось в одну строку) Commented 21 окт. 2019 в 9:10
0

Похоже что сам нашел решение

function getNearestChildrenList(parentId) {
    return [...document.querySelectorAll('.b')].filter(b => (b.closest('.a').id === parentId));
}

console.log(getNearestChildrenList('parent-1'));
<div class='a' id='parent-1'>
    <div class='b' id='child-1'></div>
    <div class='c'>
        <div class='b' id='child-2'></div>
    </div>
    <div class='b' id='child-3'></div>
    <div class='a' id='parent-2'>
        <div class='b' id='child-4'></div>
        <div class='b' id='child-5'></div>
    </div>
</div>

Ваш ответ

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

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