3

私はJavaScriptを学んでいて、これに出くわしました：

HTML：

<ul id="nav">
<li><a href="/" id="home">Home</a></li>
<li><a href="/about" id="about">About Us</a></li>
<li><a href="/contact" id="contact">Contact Us</a></li>
</ul>

JavaScript：

document.getElementById("about").parentNode.setAttribute("class", "active");
document.getElementById("about").parentNode.previousSibling.setAttribute("class", "previous");
document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");

しかし、このコードを実行するたびに、「TypeError」が発生します。機能しているように見えるのは。だけですdocument.getElementById("about").parentNode.setAttribute。

これは正しいですか、それとも理由もなく最終的には機能しない奇妙なものの1つですか？

4

2 に答える 2

4

<li>この問題は、各ノード間の改行が原因で発生します。このHTMLを使用すると機能します。

<ul id="nav">
   <li><a href="/" id="home">Home</a></li><li><a href="/about" id="about">About Us</a></li><li><a href="/contact" id="contact">Contact Us</a></li>
</ul>

改行はそのままで、previousSiblingとnextSiblingはtextNode改行を含みます。

代わりにjQueryを使用することをお勧めします-jQueryセレクターを使用すると、これらのタイプの問題を回避できます。

于 2012-12-31T03:34:14.833 に答える
4

はpreviousSibling、要素ではないノードを指しています。

を使用できますpreviousElementSibling。これは<IE9ではサポートされていないため、関数を作成できます...

var previousElementSibling = function(node) {

     if (node.previousElementSibling) {
         return node.previousElementSibling;
     }

     do {
         node = node.previousSibling;
     } while (node && node.nodeType != 1);

     return node;
};

jsFiddle。

これは、ネイティブpreviousElementSiblingが存在する場合はそれを使用します。存在しない場合は、要素であるノードが見つかるまで、前の兄弟のループにフォールバックします。null存在しない場合は、プロパティと同様にを返しpreviousElementSiblingます。

于 2012-12-31T03:34:21.290 に答える