Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2017, 01:06
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Символ в зависимости от уровня вложенности списка
Добрый вечер!
Есть список со сложной уровнем вложенности. Например:
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 21.01.2017 в 15:15.
Ответить с цитированием
  #3 (permalink)  
Старый 21.01.2017, 15:05
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Супер! Спасибо огромное!
Ответить с цитированием
  #4 (permalink)  
Старый 21.01.2017, 15:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

qwe88,
для надёжности немного изменил код
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2017, 15:24
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Отлично, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает скрипт отображения списка Konstantine Javascript под браузер 3 18.03.2013 06:00
Предполагается наличие ';' в IE7- FINoM (X)HTML/CSS 5 25.08.2012 16:05
В зависимости от варианта списка, подсчитать цену duranga jQuery 4 04.04.2011 11:46
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40