CODEWITHSUNDEEP
javascriptjquerycssclass
Brian Coolidge
Brian Coolidge

Reputation: 4649

Add Class to ALL Child of UL element

Well, I wanted to add class to all of li's of my ul, yet I don't know why it won't work.

My CSS code:

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

here's my html code for it.

<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>

And here is my code for the function vnav_function()

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

Well, for some reason it won't work though. any ideas for this stuff?

Upvotes: 0

Views: 3122

Answers (5)

Web_Designer
Web_Designer

Reputation: 74530

No jQuery:

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

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

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Well no need to use .each instead $('.vnav-menu li').addClass('extra'); this can add class to every li inside ul.vnav-menu

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

.attr('id') returns a string. I think that you want to use the ID for comparison:

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

However, it would be much easier to just do

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

...and it would be even easier to do

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

You may even want to do:

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

Upvotes: 2

Anujith
Anujith

Reputation: 9370

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

Or just:

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

Upvotes: 0

user1726343
user1726343

Reputation:

You are trying to invoke the addClass method on the string returned by $(this).attr('id'). Try using the addClass method on the jQuery collection returned by $(this):

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

Upvotes: 1

Related Questions