0

私はstackoverflowを見回しましたが、jQueryでやりたいことをする方法しか見つかりませんでした。私が見つけたコードはこれです：

$("li:has(ul)").each(function(){
    $(this).find(">a").addClass("hasSubmenu");
});

これをプレーンな Javascript に変換したいと思います。したがって、この短いコードのために jQuery ライブラリーを含める必要はありません。

これをJSコードに変換するのを手伝ってくれる人はいますか?

4

2 に答える 2

2

ここには2つの答えがあります。最新のブラウザでは、 メソッドquerySelectorとquerySelectorAllメソッドを使用して、jQuery と同様のクエリを実行できます。

var ulChildrenOfLi = document.querySelectorAll('li>ul');
for (var u = 0, ulen = ulChildrenOfLi.length; u < ulen; u++) {
    var liParent = ulChildrenOfLi[u].parentElement,
        aChildOfLi = liParent.querySelector('li>a');
    if (aChildOfLi) {
        aChildOfLi.className = aChildOfLi.className.replace("hasSubmenu", '') + " hasSubmenu";
    }
}

IE をサポートする必要がある場合は、もう少しコードを追加できます。

var lis = document.getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++) {
    var li = lis[i],
        uls = li.getElementsByTagName('ul'),
        children = li.children;
    if (uls.length !== 0) {
        for (var c = 0, cl = children.length; c < cl; c++) {
            var kid = children[c];
            kid.className = kid.className.replace("hasSubmenu", '') + " hasSubmenu";
        }
    }
}

ここに両方の​​jsFiddleがあります：http://jsfiddle.net/ppxcy/1/

于 2012-10-24T19:45:23.230 に答える
1

あなたはこれを試してみてください

var nav=document.getElementById('nav'), lis=nav.getElementsByTagName('li');
for(i=0;i<lis.length;i++)
{
    if(lis[i].hasChildNodes())
    {
        var childUl=lis[i].getElementsByTagName('ul');
        if(childUl.length)
            lis[i].getElementsByTagName('a')[0].className+=" hasSubmenu";
    }
}

デモ。

于 2012-10-24T19:47:00.293 に答える