将Class添加到UL元素的ALL Child

Add Class to ALL Child of UL element

本文关键字：ALL Child 元素 UL Class 添加      更新时间：2023-09-26

好吧，我想把类添加到我ul的所有li中，但我不知道为什么它不起作用。

我的CSS代码:

.vnav-menu li.selected {
    background:#fff;
}

这是我的html代码。

<ul class="vnav-menu">  <!-- Initiates Showing/Hiding Dashboard Containers -->
    <li onclick="vnav_function('current_offer');"   id="current_offer_li"   class="selected">   <a> CURRENT OFFERS  </a></li>
    <li onclick="vnav_function('draft_offer');"     id="draft_offer_li">                        <a> DRAFT OFFERS    </a></li>
    <li onclick="vnav_function('expired_offer');"   id="expired_offer_li">                      <a> EXPIRED OFFERS  </a></li>
    <li onclick="vnav_function('offer_code');"      id="offer_code_li">                         <a> OFFER CODE      </a></li>
    <li onclick="vnav_function('title');"           id="title_li">                              <a> TITLE           </a></li>
    <li onclick="vnav_function('schedule');"        id="schedule_li">                           <a> SCHEDULE        </a></li>
    <li onclick="vnav_function('offer_type');"      id="offer_type_li">                         <a> OFFER TYPE      </a></li>
</ul>

这是我为函数vnav_function（）编写的代码

function vnav_function(data) {  //Showing/Hiding Dashboard Containers
    $('.vnav-menu li').each(function(i)
    {
       $(this).attr('id').addClass("selected");
    });
}

好吧，出于某种原因，它不会起作用。有什么想法吗？

.attr('id')返回一个字符串。我认为你想使用ID进行比较：

if ($(this).attr('id') == $(data.target).attr('id') {
    $(this).addClass('selected');
}

然而，只做会容易得多

function vnav_function(data) {
    $(this).addClass('selected');
}

并且进行会更容易

<ul class="vnav-menu">  <!-- Initiates Showing/Hiding Dashboard Containers -->
    <li id="current_offer_li"   class="selected">   <a> CURRENT OFFERS  </a></li>
    <li id="draft_offer_li">                        <a> DRAFT OFFERS    </a></li>
    <li id="expired_offer_li">                      <a> EXPIRED OFFERS  </a></li>
    <li id="offer_code_li">                         <a> OFFER CODE      </a></li>
    <li id="title_li">                              <a> TITLE           </a></li>
    <li id="schedule_li">                           <a> SCHEDULE        </a></li>
    <li id="offer_type_li">                         <a> OFFER TYPE      </a></li>
</ul>
$(".vnav-menu li").on('click', function () {
    $(this).addClass('selected');
});

你甚至可能想做：

$(".vnav-menu li").on('click', function () {
    $(".vnav-menu").removeClass('selected');
    $(this).addClass('selected');
});

您正试图对$(this).attr('id')返回的字符串调用addClass方法。尝试对$(this):返回的jQuery集合使用addClass方法

$(this).addClass("selected");

无jQuery:

function getElementsByCSSSelector(s) {
    return Array.prototype.slice.call(document.querySelectorAll(s));
}
getElementsByCSSSelector('.vnav-menu li').forEach(function(li) {
    li.classList.add("selected");
});

function vnav_function(data) {  //Showing/Hiding Dashboard Containers
  $('.vnav-menu li').each(function()
  {
     $(this).addClass("selected");
  });
 }

或者只是：

function vnav_function(data) {  //Showing/Hiding Dashboard Containers
   $('.vnav-menu li').addClass('extra');
}

无需使用.each代替$('.vnav-menu li').addClass('extra');，这可以将class添加到ul.vnav-menu 内的每个li

相关文章：