Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Символ в зависимости от уровня вложенности списка (https://javascript.ru/forum/misc/66977-simvol-v-zavisimosti-ot-urovnya-vlozhennosti-spiska.html)

qwe88 21.01.2017 01:06

Символ в зависимости от уровня вложенности списка
 
Добрый вечер!
Есть список со сложной уровнем вложенности. Например:
<ul id="hmenu">

      <li><a>Text_1</a>
      </li>
      <li><a>Text_2</a>
        <ul>
          <li><a>1</a>
          </li>
          <li><a>2</a>
            <ul>
              <li><a>a</a>
              </li>
              <li><a>b</a>
              </li>
              <li><a>c</a>
              </li>
            </ul>
          </li>
          <li><a>3</a>
          </li>
        </ul>
      </li>
      <li><a>Text_3</a>
      </li>
    </ul>


Как сделать как прикрутить количество тире ("-"), в зависимости от уровня вложенности?
Например у "b" будет так: "---b". У "1" так: "--1". У "Text_3" так: "-Text_3"

рони 21.01.2017 01:23

qwe88,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var ul = document.querySelector("#hmenu"),
        a = ul.querySelectorAll("a"),
        parent = ul.parentNode;
    [].forEach.call(a, function(el) {
        var str = "";
        var target = el.parentNode;
        while (target != parent) {
            if (target.tagName == "UL") str += "-";
            target = target.parentNode
        }
        el.text = str + el.text
    })
});
  </script>
</head>

<body>
<ul id="hmenu">

      <li><a>Text_1</a>
      </li>
      <li><a>Text_2</a>
        <ul>
          <li><a>1</a>
          </li>
          <li><a>2</a>
            <ul>
              <li><a>a</a>
              </li>
              <li><a>b</a>
              </li>
              <li><a>c</a>
              </li>
            </ul>
          </li>
          <li><a>3</a>
          </li>
        </ul>
      </li>
      <li><a>Text_3</a>
      </li>
    </ul>


</body>
</html>

qwe88 21.01.2017 15:05

Супер! Спасибо огромное!

рони 21.01.2017 15:18

qwe88,
для надёжности немного изменил код

qwe88 21.01.2017 15:24

Отлично, спасибо!


Часовой пояс GMT +3, время: 02:18.