Форум

samtam · #1 (**permalink**) 28.08.2016, 03:50

Здравствуйте, сразу прощу прощения за нубский вопрос, но нужно сделать на сайте ручную сортировку в меню, но как я не знаю.

Есть список такого вида:

<ul>
	<li class="cat-1">ссылка</li>
	<li class="cat-2">ссылка</li>
	<li class="cat-3">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
	<li class="cat-4"></li>
	....
</ul>

Как с помощью js поменять последовательность вывода li элементов в строго заданном порядке используя уникальные классы, допустим cat-3, cat-1, cat-4, cat-2 и чтобы порядок можно было в ручную прописывать в скрипте. Заранее благодарен.

Strongman · #2 (**permalink**) 28.08.2016, 07:50

Я так полагаю нужно использовать функции insertBefore() и removeChild().
Читайте: https://learn.javascript.ru/modifying-document.

рони · #3 (**permalink**) 28.08.2016, 09:40

samtam,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


  <script>
window.addEventListener("DOMContentLoaded", function() {
    function c(a) {
        var b = -1;
        ["cat-3", "cat-1", "cat-4", "cat-2"].some(function(c, d) {
            -1 < a.indexOf(c) && (b = d);
            return -1 < b
        });
        return b
    }
    var d = document.querySelector("ul");
    [].slice.call(document.querySelectorAll("body > ul > li"), 0)
    .sort(function(a, b) {
        return c(a.className) - c(b.className)
    })
    .forEach(function(a) {
        d.appendChild(a)
    })
});

  </script>
</head>

<body>
<ul>
  <li class="cat-1">1</li>
  <li class="cat-2">2</li>
  <li class="cat-3">3
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li class="cat-4">4</li>
</ul>


</body>
</html>

samtam · #4 (**permalink**) 28.08.2016, 14:30

Рони, Спасибо большое, то что нужно.

Форум

Справочник

Discord чат

Курсы javascript