Есть ли способ перебрать неупорядоченный список с подсписками - нет jQuery? - PullRequest
Новая
       0

Есть ли способ перебрать неупорядоченный список с подсписками - нет jQuery?

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

Я хочу выделить каждый элемент списка в моем неупорядоченном списке 'g1'.В списке есть несколько подсписков.Я хочу нажать «стрелку вниз» и «вверх», чтобы выделить следующий элемент.Мне удалось перебрать внешний список, но с подсписками мое решение становится очень грязным.Есть ли лучший способ, чем мой, с чистым JavaScript? 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Family Tree</title>
</head>

<body id='main'>
    <nav>
        <h1 id=pos></h1>
    </nav>
    <ul id='g1' class="special">
        <ul id='generation2'>
            <li>John Williams</li>
            <li>Filippa Williams</li>
            <ul id='generation3'>
                <li>Juan James</li>
                <li>Catarina James</li>
                <li>Aoifa James</li>
            </ul>
            <li>Juan Williams</li>
        </ul>
        <li>Mark Williams</li>
        <li>Christina Johnson</li>
        <li>Christina Johnson</li>
        <li>Christina Johnson</li>
        <li>Juan Williams</li>
        <li>Juan Williams</li>
        <ul id='generation2'>
            <li>John Williams</li>
            <li>Filippa Williams</li>
        </ul>
    </ul>

</body>


</html>



document.onkeydown = function (e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            up()
            break;
        case 39:
            alert('right');
            break;
        case 40:
            down();
            break;
    }
};

var pos = -1;
var posSub = -1;
var posSubSub = 0;
var pointer;


function down() {
    var childrensChildren;
    var childrensGrandchildren;
    var gen1 = document.getElementById('g1');
    var gen1children = gen1.children;
    if (pos === -1) {
        gen1children[0].style.backgroundColor = 'yellow';
        pos++;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    if (pos == gen1children.length - 1) {
        gen1children[gen1children.length - 1].style.backgroundColor = 'white';
        gen1children[0].style.backgroundColor = 'yellow';
        pos = 0;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    if (gen1children[pos].firstElementChild) {
        var childrensChildren = gen1children[pos].children;
        if (childrensChildren.firstChild) {
            childrensGrandchildren = childrensChildren[posSub].children;
            childrensGrandchildren[posSubSub].style.backgroundColor = 'yellow';
            childrensGrandchildren[childrensGrandchildren.length - 1].style.backgroundColor = 'white';
            posSubSub++;
        } else {
            if (posSub === -1) {
                childrensChildren[0].style.backgroundColor = 'yellow';
                posSub++;
                return null;
            }
            if (posSub == childrensChildren.length - 1) {
                childrensChildren[childrensChildren.length - 1].style.backgroundColor = 'white';
                childrensChildren[0].style.backgroundColor = 'yellow';
                return null;
            } else {
                posSub += 1;
                childrensChildren[posSub - 1].style.backgroundColor = 'white';
                childrensChildren[posSub].style.backgroundColor = 'yellow';
                return null;
            }

        }
    }
    gen1children[pos].style.backgroundColor = 'white';
    gen1children[pos + 1].style.backgroundColor = 'yellow';
    pos += 1;
    document.getElementById('pos').innerHTML = pos;
    return null;
}

function up() {
    var gen1 = document.getElementById('g1');
    var gen1children = gen1.children;
    if (pos === -1) {
        gen1children[0].style.backgroundColor = 'yellow';
        pos++;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    if (pos == 0) {
        gen1children[gen1children.length - 1].style.backgroundColor = 'yellow';
        gen1children[0].style.backgroundColor = 'white';
        pos = gen1children.length - 1;
        document.getElementById('pos').innerHTML = pos;
        return null;
    }
    gen1children[pos].style.backgroundColor = 'white';
    gen1children[pos - 1].style.backgroundColor = 'yellow';
    pos -= 1;
    document.getElementById('pos').innerHTML = pos;
    return null;
}

Ответы [ 2 ]

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

Вы можете быстро создать плоский список всех li элементов в своем иерархическом дереве DOM и просмотреть этот список визуально с помощью клавиш со стрелками: 

// Flat list of all `li` elements (in expected order)
let allLiElems = Array.from(document.getElementById('g1').getElementsByTagName('li'));

let liInd = null;
let highlightAtInd = ind => {
  // Remove highlight from previous node
  if (liInd !== null) allLiElems[liInd].classList.remove('highlight');
  
  // Apply highlight to next node
  liInd = ind;
  allLiElems[liInd].classList.add('highlight');
};

window.addEventListener('keydown', evt => {
  if (![ 38, 40 ].includes(evt.keyCode)) return;
  
  // Get the new index; ensure it doesn't over/underflow
  let newInd = liInd + ((evt.keyCode === 38) ? -1 : +1);
  if (newInd < 0) newInd = allLiElems.length - 1;
  if (newInd >= allLiElems.length) newInd = 0;
  
  highlightAtInd(newInd);
  
  evt.preventDefault();
});

// Initially highlight the 1st node
highlightAtInd(0);
* { overflow: hidden !important; }
#g1 { font-size: 11px; /* I want this to fit in the preview box */ }
.highlight {
  background-color: rgba(255, 0, 0, 0.3);
}
<ul id='g1' class="special">
  <ul id='generation2'>
    <li>John Williams</li>
    <li>Filippa Williams</li>
    <ul id='generation3'>
      <li>Juan James</li>
      <li>Catarina James</li>
      <li>Aoifa James</li>
    </ul>
    <li>Juan Williams</li>
  </ul>
  <li>Mark Williams</li>
  <li>Christina Johnson</li>
  <li>Christina Johnson</li>
  <li>Christina Johnson</li>
  <li>Juan Williams</li>
  <li>Juan Williams</li>
  <ul id='generation2'>
    <li>John Williams</li>
    <li>Filippa Williams</li>
  </ul>
</ul>

Убедитесь, что вы сфокусировали окно, прежде чем пытаться выполнить ключевые события!

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

Вы можете создать класс для всех ваших пунктов меню, а затем установить свойство "select" в CSS https://www.w3schools.com/howto/howto_custom_select.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...