javascript - CSS 类未在节点中应用

标签 javascript html css scripting themes

我正在尝试使用以下脚本向 #menuElem 标记添加和删除类:

<script type="text/javascript">
$('#menuElem li ul').each(function (){
  $(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function (){
  $(this).addClass("skew");
});
 $('#menuElem li ul li a').each(function (){
  $(this).removeClass("skew");
});
</script>

理想情况下这应该可行,但行不通,有人可以帮忙吗?

请看下面我们添加类的 HTML,您可以在 HTML 中找到 menuElem

<!-- Header zone -->
<!-- header -->
<div class="tenantHeade fs-headerfooter-widget">
<!---->
<header>
<div id="container" class="container">
<div class="logocont"><a href="/" class="logo">website</a></div>
<!-- Mobile nav btn -->
<a class="nav-toggle" href="javascript:void(0);"><span class="ada-compliant visible-xs"></span></a>
<!-- Mobile user options (for anon and preferred visitors) -->

<a href="javascript:void(0);" class="member-toggle">
<span class="ada-compliant visible-xs"></span>

</a>

<!-- Main nav -->
<nav class="main-nav inactive">
 <ul id="menuElem">
  <li>
   <a href="https://www.website.com/FareFinder/DeepLinkSearch/?SearchFrom=browseexperiences&amp;TravlePeriod=12&amp;AdultCount=2"><span class="antiskew">Browse Experiences</span></a>
   <ul>
    <li>
     <a href="https://www.website.com/FareFinder/DeepLinkSearch/?SearchFrom=website&amp;amp;TravlePeriod=12&amp;amp;AdultCount=2">website</a>
    </li>
    <li>
     <a href="https://www.website.com/local">Local</a>
    </li>
    <li>
     <a href="https://www.website.com/https://www.website.com/FareFinder/DeepLinkSearch/?SearchFromType=theme&amp;SearchFrom=voluntours&amp;TravlePeriod=12&amp;Keyword=voluntours&amp;AdultCount=2">Voluntours</a>
    </li>
    <li>
     <a href="https://www.website.com/https://www.website.com/FareFinder/DeepLinkSearch/?SearchFromType=theme&amp;SearchFrom=welcomewebsite&amp;TravlePeriod=12&amp;Keyword=welcome+website&amp;AdultCount=2">Welcome website</a>
    </li>
   </ul>
  </li>
  <li>
   <a href="https://www.website.com/Marketing/becomemember"><span class="antiskew">Become a Member</span></a>
  </li>
  <li>
   <a href="https://www.website.com/Marketing/becomemember"><span class="antiskew">Daily Deals</span></a>
  </li>
 </ul>

最佳答案

$(document).ready(function() {
    $('#menuElem>li>ul').addClass("fallback browse-experience-drop-down-width");
    $('#menuElem>li>a').addClass("skew");
    $('#menuElem>li>ul>li>a').removeClass("skew");
});

关于javascript - CSS 类未在节点中应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36620598/

相关文章:

html - PrimeNG 表 [rowHovered] 不适用于设置了单元格背景的单元格

php - 更改单个页面的链接颜色

javascript - 动画显示和隐藏登录框

javascript - 显示来自私有(private) Trello 看板的卡片,访问者不需要 Trello 帐户,也不需要通过弹出窗口授权

javascript - 从 bootstrap 弹出窗口打开隐藏的 div

javascript - 双击Jquery时如何编辑和更新<td>值

html - 通过根据 html 标签调整单元格大小,使用 UITextView 在 UITableViewCell 中显示 html [不是 UILabel!]

javascript - 使用图像的高度更改不透明度级别

php - TCPDF 文本与图像重叠

在 Wordpress 站点中使用关键帧进行 CSS 动画/转换