Сделать «неупорядоченный список» вести себя как «упорядоченный список» с Javascript - PullRequest
Новая
       22

Сделать «неупорядоченный список» вести себя как «упорядоченный список» с Javascript

0 голосов
/ 06 февраля 2019

Мне нужно отобразить номера каждого элемента списка в неупорядоченном списке.Чтобы добиться этого, я попытался преобразовать неупорядоченный тег списка ul в упорядоченный тег списка ol (см. Мой скрипт ниже).Мне нужно это сделать, потому что я хочу, чтобы каждый тег li отображал рядом с ним свой номер заказа.

Вот скрипт, который я пробовал, который я нашел на codepen : 

var ul = document.getElementsByClassName("productGrid")[0]
var ol = document.createElement("ol");

var li = ul.querySelectorAll('li');
for(var i=0;i<li.length;i++) {
  ol.appendChild(li[i]);
}

setTimeout(function() {
  ul.parentNode.replaceChild(ol,ul);
},1000);

Это работает, но, как и ожидалось, разрушило "стили", установленные для этого тега ul.Поэтому вместо того, чтобы превращать его в фактический тег ol, мне нужно сохранить его как ul и отображать числа другим способом.

Как я могу использовать JavaScript, чтобы узнать, сколько li находится внутри тега ul, а затем отобразить соответствующее число в теге li (через что-то вроде тега span)

Любая помощь с этим будет высоко ценится.

1 Ответ

0 голосов
/ 06 февраля 2019

Рассматривали ли вы подход, основанный исключительно на CSS?

Вы можете добиться аналогичного эффекта подсчета для неупорядоченного списка без использования JavaScript через псевдоэлемент :before, а также counter-reset и counter-increment Свойства CSS.

Вот фрагмент, демонстрирующий эту технику в действии: 

.number-list {
  /* Init your custom counter for children */
  counter-reset: number-list-counter;

  /* Hide point list style */
  list-style:none; 
}

.number-list li {
  position:relative;
}

.number-list li:before {
	/* 
  Set content of pseduo element by parent counter
  and increment the counter 
  */
  content: counter(number-list-counter);
  counter-increment: number-list-counter;
  
  /* Offset position of counter pseduo elements */
  position:absolute;
  top:0;
  left:-2rem;

  /* Apply some styling to the numbering */
  color: red;
  font-weight:bold;
  font-size:1.5rem;
}
<ul class="number-list">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
<ul>
...