0

Есть блок с вложенными дивами, внутри которых есть спаны и чекбокс - нужно получить содержимое спанов и boolean от чекбокса и сформировать некий объект.

document.getElementById('clicked').addEventListener('click', clicker);

function clicker(e) {
  const parent = e.target.parentNode;
  
  if (parent.className != 'wrapper') return;
  
  parent.childNodes.forEach(elem => {
    console.log(elem.innerHTML);
  })
}
<div id="clicked">
  <div class="wrapper">
    <span>1</span>
    <span>абвгдейка</span>
    <input type="checkbox" disabled />
  </div>

  <div class="wrapper">
    <span>2</span>
    <span>зеленый абрикос</span>
    <input type="checkbox" checked disabled />
  </div>
</div>

<div id="second"></div>

Как перебрать все элементы внутри wrapper и сформировать объект из значений? Без добавления id или классов дочерним элементам.

2
  • по имени тэгов. либо в цикле сравнивать имена, либо получать через getElementsByTagName
    – teran
    18 июл 2018 в 9:34
  • @teran я что-то все равно не могу сообразить как сформировать объект. хотя, можно добавить, например, классы элементам и сделать эти классы ключами объекта уже в цикле.
    – Илья
    18 июл 2018 в 9:45

3 ответа 3

2

document.getElementById('clicked').addEventListener('click', clicker);

function clicker(e) {
  const parent = e.target.parentNode;
  const result = {}

  if (parent.className != 'wrapper') return;
  
  const spans = [...parent.querySelectorAll('span')]; // получаем все спаны и превращаем в массив
  const checkbox = parent.querySelector('input'); // получаем ОДИН чекбокс

  result.checkbox = checkbox.checked;
  result.spanHTML = spans.map(s => s.innerHTML);

  console.log(result);
}
<div id="clicked">
  <div class="wrapper">
    <span>1</span>
    <span>абвгдейка</span>
    <input type="checkbox" disabled />
  </div>

  <div class="wrapper">
    <span>2</span>
    <span>зеленый абрикос</span>
    <input type="checkbox" checked disabled />
  </div>
</div>

<div id="second"></div>

Получим такое: ( для первого чекбокса )

{
  "checkbox": false,
  "spanHTML": [
    "1",
    "абвгдейка"
  ]
}
1
  • Хотелось избежать массивов, в том числе вложенных, поэтому сделал немного иначе, но спасибо! Ваш ответ тоже помог разобраться в вопросе.
    – Илья
    18 июл 2018 в 11:21
0

Сделал вот так в итоге - добавил классы к дочерним элементам и использовал их в качестве ключей объекта.

document.getElementById('clicked').addEventListener('click', clicker);

function clicker(e) {
  const parent = e.target.parentNode;
  let obj = {};
  e.preventDefault();
  
  if (parent.className != 'wrapper') return;
  
  parent.childNodes.forEach(elem => {
    if (elem.tagName == 'SPAN') obj[elem.className] = elem.innerHTML;
    if (elem.tagName == 'INPUT') obj[elem.className] = elem.checked;
  });
  
  console.log(obj);
}
<div id="clicked">
  <div class="wrapper">
    <span class="id">1</span>
    <span class="text">абвгдейка</span>
    <input class="checked" type="checkbox" disabled />
  </div>

  <div class="wrapper">
    <span class="id">2</span>
    <span class="text">зеленый абрикос</span>
    <input class="checked" type="checkbox" checked disabled />
  </div>
</div>

<div id="second"></div>

-2

Примерно так?

document.getElementById('clicked').addEventListener('click', clicker);

function clicker(e) {
  const object={};
  const parent = e.target.parentNode.children;
 for (i=0; i < parent.length; i++){
  if (object[parent[i].nodeName] === undefined && parent[i].nodeName !== "INPUT") {
    object[parent[i].nodeName]= parent[i].innerText;
  } else if ( parent[i].nodeName === "INPUT"){
    object[parent[i].nodeName]= parent[i].checked;
  } else {
    object[parent[i].nodeName + i]= parent[i].innerText;
  }
 }
  console.log(object);
 };
2
  • var Object={}; так не стоит делать, вы перезаписываете локально глобальный объект.
    – ThisMan
    18 июл 2018 в 10:32
  • Да, согласен. Спасибо)
    – Lukas
    18 июл 2018 в 10:33

Ваш ответ

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

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