Question

好吧，我想在我的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");
    });
}

嗯，由于某种原因它不会起作用。对这些东西的任何想法？

Answer 1

.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');
});

Answer 2

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

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

Answer 3

没有jQuery：

function getElementsByCSSSelector(s) {
    return Array.prototype.slice.call(document.querySelectorAll(s));
}

getElementsByCSSSelector('.vnav-menu li').forEach(function(li) {
    li.classList.add("selected");
});

Answer 4

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');
}

Answer 5

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

将类添加到UL元素的所有子元素

5 个答案: