Question

我在理解JQuery元素的结构以及如何浏览DOM树时遇到了一些问题。

我的目标是突出显示（背景颜色）点击的链接（a）。如果＆＃34; li a＆＃34;在ul里面，这不是主菜单＆＃34; ul（意思是子菜单链接）然后我要突出显示子菜单链接和顶部菜单链接。

我的HTML代码是：

<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
    <li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
    <li><a href="welcome.html"  id="d" title="c">read</a>
        <ul class="par">
            <li><a href="welcome.html" id="b" title="title" >test</a></li>
            <li><a href="Register_client.aspx" id="c" title="add">addRead</a></li>
         </ul>
     </li>
     <li><a href="books.aspx" title="Books" >Books</a>
           <ul  class="par">
                <li><a href="books.aspx" title="Manage">Search</a></li>
                <li><a href="Register_book.aspx" title="addbook">Register</a></li>
            </ul>
      </li>
      <li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>

</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>

</body>

至于JQuery我试过这个：

$(this).closest("ul").find("a").attr("id"));

和其他几个版本的父母，但我得到＆＃34; undefined＆＃34;当我检查警报时，或者清空字符串。你能帮我理解我的错误在哪里吗？我确定它是非常简单的，我无法找到它。谢谢

Answer 1

要突出显示子菜单链接及其最顶层的父链接，请使用以下代码：

$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");

第一行突出显示链接。

第二行会查找最顶层'li'，然后选择其即时'a'标记并突出显示

<强>更新

要删除上一次点击的突出显示，请使用CSS类：

.highlight {
    background-color: red;
}

然后使用以下代码：

$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');

如何使用JQuery获取DOM元素的id

1 个答案: