Форум

qwe88 · #1 (**permalink**) 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"

рони · #2 (**permalink**) 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 · #3 (**permalink**) 21.01.2017, 15:05

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

рони · #4 (**permalink**) 21.01.2017, 15:18

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

qwe88 · #5 (**permalink**) 21.01.2017, 15:24

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

Форум

Справочник

Discord чат

Курсы javascript