Блог

Главная - Вопросы по программированию - jQuery добавляет класс к дочернему элементу

jQuery добавляет класс к дочернему элементу

#javascript #jquery #addclass

#javascript #jquery #addclass

Вопрос:

У меня есть обычный неупорядоченный список для меню навигации с подменю…

HTML:

 <ul>
  <li><a href="#">Link 1</a></li>
  <li>
    <a href="#">Link with submenu</a>
    <ul>
      <li><a href="#">Sublink 1</a></li>
    </ul>
   </li>
</ul>

Все ссылки внутри родительского <li> элемента имеют радиус границы. Но если у родительского <li> элемента есть дочерний <ul> элемент, я не хочу, чтобы ссылка имела радиус.

В настоящее время я использую этот jQuery:

 <script>
  $("li").has("ul").addClass("sub-radius");
</script>

Он работает нормально, за исключением того, что он нацелен на <li> , но мне нужно, чтобы он был нацелен на дочерний <a> элемент и удалял его радиус.

Любая помощь будет оценена.

Ответ №1:

Попробуйте это выражение:

 $("li:has(ul) > a").addClass("sub-radius");

Редактировать: если вы не хотите, чтобы подпункты имели радиусы границ, удалите > их в запросе.

Комментарии:

1. Сработало отлично. Спасибо всем за быстрые и потрясающие ответы!

Ответ №2:

Здесь вам не нужен jQuery, вы можете добиться этого с помощью одного CSS. Просто используйте :only-child псевдокласс:

 a:only-child { /* define border-radius here */ }

Живая демонстрация: http://jsfiddle.net/QYaqb/

Ответ №3:

Это должно работать для вашего HTML

 ("li").has("ul").children("a").addClass("sub-radius");

Ответ №4:

Я думаю, вы хотите .find :

 <script>
  $("li:has(ul)").find("a").addClass("sub-radius");
</script>

Ответ №5:

просто нужно найти a внутри li:

 $("li").has("ul").find('a').addClass("sub-radius");

вот скрипка:
http://jsfiddle.net/cBfMV /

Метки: