Как получить идентификатор элементов DOM с помощью JQuery

Question

У меня возникли проблемы с пониманием размытости элементов JQuery и способов перемещения по дереву DOM.

Моя цель - выделить (цвет фона) щелкнув ссылку (a). , если «li a» находится внутри ul, который не является основным «меню» 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")); 

и несколько других версий с родителями, но я получаю «неопределенные» или пустые строки, когда я проверить с предупреждениями. Можете ли вы помочь мне понять, где моя ошибка? Я уверен, что это очень просто, я просто не могу его найти. Благодаря

Answer 1

Чтобы выделить ссылку подменит и его самое верхняя родительская ссылка используйте следующий код:

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

Первая линия подчеркивает связь.

Вторая строка будет выглядеть на самом верхние 'li' затем выберите его непосредственный 'a' тег и выделить его

UPDATE:

Для удаления выделения предыдущего щелчка использовать класс CSS:

.highlight { 
    background-color: red; 
} 

Затем используйте следующий код:

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