1

Chrome を使用して、リストの別の要素をターゲットにしようとしています

<ul>
<li><a href="#" id="One">One</a></li>
<li><a href="#" id="Two">Two</a></li>
<li><a href="#" id="Three">Three</a></li>
<li><a href="#" id="Four">Four</a></li>
<li><a href="#" id="Five">Five</a></li>
</ul>

だからこれはうまくいく、

document.getElementById("Three").parentNode.setAttribute("class", "active");

しかし、これはそうではなく、なぜ私は混乱しています.

document.getElementById("Three").parentNode.previousSibling.setAttribute("class", "active");

コンソールに表示されるエラーは次のとおりです。

Uncaught TypeError: Object #<Text> has no method 'setAttribute'
4

1 に答える 1

3

親要素である の前の兄弟は、メソッド<li>を持たないテキスト ノード (改行を含む)です。setAttribute()

この JS の行は、次のように要素間の空白を削除すると機能します。

<li><a href="#" id="Two">Two</a></li><li><a href="#" id="Three">Three</a></li>

デモ: http://jsfiddle.net/HLGJE/

しかし、おそらくすべてのマークアップを 1 行にまとめたくないので、次のようにしてテキスト ノードをスキップすることができます。

var prev = document.getElementById("Three").parentNode.previousSibling;
while(prev.nodeType == 3)
    prev = prev.previousSibling;
prev.setAttribute("class", "active");

デモ: http://jsfiddle.net/HLGJE/2/

于 2013-11-03T03:25:14.843 に答える