0

既存のメニューからナビゲーションを作成しようとすると、マークアップは次のようになります。

<nav>
    <ul id="nav">
        <li>
            <a href="?=home">Home</a>
            <ul>
                <li><a href="?=sub-1">Sub 1</a></li>
                <li><a href="?=sub-2">Sub 2</a></li>
                <li><a href="?=sub-3">Sub 3</a></li>
                <li><a href="?=sub-4">Sub 4</a></li>
                <li><a href="?=sub-5">Sub 5</a></li>
            </ul>
        </li>
        <li>
            <a href="?=about">About</a>
        </li>
        <li>
            <a href="?=services">Services</a>
        </li>
        <li>
            <a href="?=portfolio">Portfolio</a>
        </li>
        <li>
            <a href="?=contact">Contact</a>
        </li>
    </ul>
</nav>

これは私が持っている JavaScript ループで、現在各トップレベルのメニュー項目を見つけて追加していますが、ネストされた子をターゲットにして、ネストされた要素にハイフンを追加する方法が本当にわかりません。

var nav = document.getElementById('nav');
    var list = nav.children.length;

    for (var i = 0; i < list; i++) {
        var option = document.createElement('option');
        option.innerHTML = nav.children[i].children[0].innerHTML;
        option.value = nav.children[i].children[0].href;
        select.appendChild(option);
    }

したがって、基本的には次のようになります。

<select>
    <option value="?=home">Home</option>
    <option value="?=sub-1">- Sub 1</option>
    <option value="?=sub-2">- Sub 2</option>

などなど…

どんな助けでも大歓迎です！ありがとうございました。

4

2 に答える 2

1

ul を再帰的にトラバースできます。これにより、マルチレベル メニューも処理されます。再帰レベルと高レベルのアイテムを追跡して、ダッシュと連結します。

アプローチの説明: http://blog.swapnilsarwe.com/javascript-traversing-html-dom-recurively.html

編集：これは例です。また、 id='select' を含む HTML select 要素をどこかに配置する必要があります。

buildSelect(document.getElementById('nav'), '', document.getElementById('select'));

function buildSelect(current, optionSoFar, select) {
    var currentLevelOption = optionSoFar;
    for (var i=0; i<current.children.length; i++) {
        var child = current.children[i];
        if ('A' == child.tagName) {
            var currentLevelLabel = child.innerText;
            var separator = ('' == optionSoFar) ? '' : ' - ';
            currentLevelOption = optionSoFar + separator + currentLevelLabel;
            var option = document.createElement('option');
            option.innerText = currentLevelOption;
            option.value = child.href;
            select.appendChild(option);
        }
        else {
            buildSelect(child, currentLevelOption, select);
        }
    }
}

ここにフィドルがあります: http://jsfiddle.net/GM54F/3/

于 2012-12-30T15:35:16.457 に答える
0

jQueryを使用するだけです。これは、コードに基づくこの例を示すjsFiddleです。これは、独自のカスタム コードを記述して DOM を自分でトラバースするよりもはるかに簡単です。

$("#nav a").each(function(){
 myValue = $(this).attr("href");
 myText = $(this).text();    
 $("#mySelect").append("<option value="+myValue + ">" + myText +"</option>");         
});
于 2012-12-30T16:35:52.730 に答える