Создать вложенный список на основе классов CSS, используя JavaScript / jQuery

Question

Какой лучший способ создать неупорядоченный список, учитывая следующее HTML, где Одежда является родителем его детей: Толстовки , Футболки, И футболки являются родителями свитеров . Свитера является родителем тестирования , et c.

Идеально работать с классами CSS - это здорово, но если есть способ с   это тоже хорошо.

Я пробовал перебирать, но пока не смог найти способ, используя for l oop в JavaScript.

<select name="parent" id="parent" class="postform">
    <option value="-1">None</option>
    <option class="level-0" value="2081">Clothing</option>
    <option class="level-1" value="2082">&nbsp;&nbsp;&nbsp;Hoodies</option>
    <option class="level-1" value="2083">&nbsp;&nbsp;&nbsp;T-shirts</option>
    <option class="level-2" value="2084">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sweaters</option>
    <option class="level-3" value="2085">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testing</option>
    <option class="level-0" value="2077">Music</option>
    <option class="level-1" value="2079">&nbsp;&nbsp;&nbsp;Albums</option>
    <option class="level-1" value="2078">&nbsp;&nbsp;&nbsp;Singles</option>
    <option class="level-0" value="2080">Posters</option>
    <option class="level-1" value="2086">&nbsp;&nbsp;&nbsp;testing2</option>
</select>

Так что полученный код становится:

<ul>
    <li data-value="2081">Clothing
        <ul>
            <li data-value="2082">Hoodies</li>
            <li data-value="2083">T-shirts
                <ul>
                    <li data-value="2084">Sweaters</li>
                    <ul>
                        <li data-value="2085">testing</li>
                    </ul>
                </ul>
            </li>
        </ul>
    </li>
    <li data-value="2077">Music
        <ul>
            <li data-value="2079">Albums</li>
            <li data-value="2078">Singles</li>
        </ul>
    </li>
    <li data-value="2080">Posters
        <ul>
            <li data-value="2086">testing2</li>
        </ul>
    </li>
</ul>

Answer 1

Понятия не имею, работает ли это (предположим, нет), но, надеюсь, оно поможет вам выбрать правильное направление

// you can put this on multiple lines if you want
const getLevel = op => op ? Number(op.className.split(' ').filter(a => a.includes('level-'))[0].split('-')[0]) : -1

// our indexing object
const listObj = {}

[...document.getElementById('parent').options].forEach(op => {
  const prev = op.previousElementSibling
  const level = getLevel(op)
  const prevLevel = getLevel(prev)
  // need to compare to the previous sibling then index it by parent
  const parentVal = level > 0 && level > prevLevel ? prev.value : 'top'
  if (level > -1) {
    listObj[parentVal][op.value] = {text: op.textContent, value: op.value}
  }
})

// our recursive function
const getListHtml = op => {
  const levelObj = listObj[op.value]
  const ul = levelObj && document.createElement('ul') : null
  levelObj && Object.values(levelObj).forEach(subLevel => {
    const li = document.createElement('li')
    ul.append(li)
    subLevel.text && (li.textContent = subLevel.text)
    // the recursion to get the next level
    li.append(getListHtml(listObj[subLevel.value]))
  })
  return ul
}

// start the recursive function and get back the HTML
const listHtml = getListHtml(listObj.top)

Answer 2

Вы можете использовать таблицу, отделить каждую опцию и удалить границы. Другой способ - использовать JS и CSS для создания слайд-шоу.