Question

There are <li> elements that one of them has class="current". I want to decide which of <li> is current. Here is view:

@{
     int k = 10;  //this will change in every request
}

<ul class="car">
     @foreach (var item in modelCount)
     {
       <li 
           @{if (item.Id == k) { <text>class="current"</text>} }>
           <a href="#">@item.Name </a>
       </li>
     }
</ul>

This works, but the first <li> is always current by default. When first element is current by my expression, everything is ok, but otherwise, <ul> has 2 current <li>.
How can I solve this problem with jquery function?

Edit:

I need:

If <li> elements have 2 current classes, to remove the first of them.

Answer 1

function removeDuplicateCurrentClass(){

    var currentListElements = [];

    $('ul.car li').each(function(){

         if($(this).hasClass('current'))
             currentListElements.push(this);
    });

    if(currentListElements.length > 1)
         $(currentListElements[0]).removeClass('current');
    //if more than one current class exist: remove the first one        

}

$(function(){

    removeDuplicateCurrentClass();

    //or simply

    if($('ul.car li.current').length > 1)
        $('ul.car li.current:first').removeClass('current');

});