Рекурсивный обход дерева в jQuery

190
25 ноября 2018, 01:50

Не получается подняться вверх по дереву, хотя, на мой взгляд, всё вроде правильно.

var array = []; 
$(document).ready(function() { 
  var liElements = $("#frontMenu").children(); 
  for (var i = 0; i < liElements.length; i++) { 
    var object = { 
      selfId: liElements.eq(i).attr('id'), 
      parentId: null 
    }; 
    array.push(object); 
    recursiveGoToChild(liElements.eq(i)); 
  } 
  console.log(array); 
}); 
 
function recursiveGoToChild(liElement) { 
  var olElement = liElement.children().eq(1); 
  if (olElement.find("li").length != 0) { 
    liElements = olElement.children(); 
 
    for (var i = 0; i < liElements.length; i++) { 
      var object = { 
        selfId: liElements.eq(i).attr('id'), 
        parentId: liElement.attr('id') 
      }; 
      array.push(object); 
      recursiveGoToChild(liElements.eq(i)); 
    } 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ol class="nested_with_switch vertical" id="frontMenu"> 
  <li id="1"> 
    <p>Item 1</p> 
    <ol></ol> 
  </li> 
  <li id="2"> 
    <p>Item 2</p> 
    <ol></ol> 
  </li> 
  <li id="3"> 
    <p>Item 3</p> 
    <ol></ol> 
  </li> 
  <li id="4"> 
    <p>Item 4</p> 
    <ol> 
      <li id="5"> 
        <p>Item 5</p> 
        <ol> 
          <li id="6"> 
            <p>Item 6</p> 
            <ol></ol> 
          </li> 
          <li id="7"> 
            <p>Item 7</p> 
            <ol></ol> 
          </li> 
          <li id="8"> 
            <p>Item 8</p> 
            <ol></ol> 
          </li> 
          <li id="9"> 
            <p>Item 9</p> 
            <ol></ol> 
          </li> 
          <li id="10"> 
            <p>Item 10</p> 
            <ol></ol> 
          </li> 
          <li id="11"> 
            <p>Item 11</p> 
            <ol></ol> 
          </li> 
        </ol> 
      </li> 
      <li id="12"> 
        <p>Item 12</p> 
        <ol></ol> 
      </li> 
      <li id="13"> 
        <p>Item 13</p> 
        <ol></ol> 
      </li> 
      <li id="14"> 
        <p>Item 14</p> 
        <ol></ol> 
      </li> 
      <li id="15"> 
        <p>Item 15</p> 
        <ol></ol> 
      </li> 
      <li id="16"> 
        <p>Item 16</p> 
        <ol></ol> 
      </li> 
      <li id="17"> 
        <p>Item 17</p> 
        <ol></ol> 
      </li> 
    </ol> 
  </li> 
  <li id="18"> 
    <p>Item 18</p> 
    <ol></ol> 
  </li> 
  <li id="19"> 
    <p>Item 19</p> 
    <ol></ol> 
  </li> 
</ol>

Answer 1

Вы забыли в рекурсивной функции объявить переменную liElements из за чего она автоматически становилась глобальной. Из за этого при вхождении в дочернюю ветку рекурсии эта глобальная переменная переприсваивалась, и родительская рекурсия продолжала работу с уже изменённым набором элементов.

var array = []; 
$(document).ready(function() { 
  var liElements = $("#frontMenu").children(); 
  for (var i = 0; i < liElements.length; i++) { 
    var object = { 
      selfId: liElements.eq(i).attr('id'), 
      parentId: null 
    }; 
    array.push(object); 
    recursiveGoToChild(liElements.eq(i)); 
  } 
  console.log(array); 
}); 
 
function recursiveGoToChild(liElement) { 
  var olElement = liElement.children().eq(1); 
  if (olElement.find("li").length != 0) { 
    let liElements = olElement.children(); 
    //^---вот здесь небыло let 
 
    for (var i = 0; i < liElements.length; i++) { 
      var object = { 
        selfId: liElements.eq(i).attr('id'), 
        parentId: liElement.attr('id') 
      }; 
      array.push(object); 
      recursiveGoToChild(liElements.eq(i)); 
    } 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ol class="nested_with_switch vertical" id="frontMenu"> 
  <li id="1"> 
    <p>Item 1</p> 
    <ol></ol> 
  </li> 
  <li id="2"> 
    <p>Item 2</p> 
    <ol></ol> 
  </li> 
  <li id="3"> 
    <p>Item 3</p> 
    <ol></ol> 
  </li> 
  <li id="4"> 
    <p>Item 4</p> 
    <ol> 
      <li id="5"> 
        <p>Item 5</p> 
        <ol> 
          <li id="6"> 
            <p>Item 6</p> 
            <ol></ol> 
          </li> 
          <li id="7"> 
            <p>Item 7</p> 
            <ol></ol> 
          </li> 
          <li id="8"> 
            <p>Item 8</p> 
            <ol></ol> 
          </li> 
          <li id="9"> 
            <p>Item 9</p> 
            <ol></ol> 
          </li> 
          <li id="10"> 
            <p>Item 10</p> 
            <ol></ol> 
          </li> 
          <li id="11"> 
            <p>Item 11</p> 
            <ol></ol> 
          </li> 
        </ol> 
      </li> 
      <li id="12"> 
        <p>Item 12</p> 
        <ol></ol> 
      </li> 
      <li id="13"> 
        <p>Item 13</p> 
        <ol></ol> 
      </li> 
      <li id="14"> 
        <p>Item 14</p> 
        <ol></ol> 
      </li> 
      <li id="15"> 
        <p>Item 15</p> 
        <ol></ol> 
      </li> 
      <li id="16"> 
        <p>Item 16</p> 
        <ol></ol> 
      </li> 
      <li id="17"> 
        <p>Item 17</p> 
        <ol></ol> 
      </li> 
    </ol> 
  </li> 
  <li id="18"> 
    <p>Item 18</p> 
    <ol></ol> 
  </li> 
  <li id="19"> 
    <p>Item 19</p> 
    <ol></ol> 
  </li> 
</ol>

READ ALSO
Вытащить значение title в label средствами jquery

Вытащить значение title в label средствами jquery

Есть блоки кода, подобные того что нижеС радиокнопки при клике нужно вытащить значение title внутреннего label(title="Серый") и вывести его в html

142
Выбор инструмента

Выбор инструмента

Стоит цель для самообразования, загрузить картинку на файлообменник без API Просто закинуть файл через форму и получить ссылку

159
C# Windows Forms Глобальный объект

C# Windows Forms Глобальный объект

Использую SQLite в своем приложении и не хочу закрывать, открывать соединение или передавать всем конструкторам форм егоКак открыть его один...

161
Вопрос про интерфейсы в c#

Вопрос про интерфейсы в c#

Пытаюсь по-нормальному понять интерфейсы в C# и столкнулся с таким вопросом:

210