This might be easy but I am having trouble in getting it to work. I am using .each() to iterate through a list. I was wondering if it is possible to remove a class using the index.

eg. If there were 10 items in the list and I want to remove the class from the 5th element when I click the 8th element for example.

$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
    $(this).click(function () {
        if (index = 8)
{
$(#5).removeClass('class');
}
    });
});

Anyone with any ideas? Thank you

This might be easy but I am having trouble in getting it to work. I am using .each() to iterate through a list. I was wondering if it is possible to remove a class using the index.

eg. If there were 10 items in the list and I want to remove the class from the 5th element when I click the 8th element for example.

$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
    $(this).click(function () {
        if (index = 8)
{
$(#5).removeClass('class');
}
    });
});

Anyone with any ideas? Thank you

• javascript
• jquery

• You don't need top iterate all the li elements, instead you can directly add an event handler on the targeted li. – The Alpha Commented Nov 30, 2012 at 16:45

3 Answers 3

Change

$(#5).removeClass('class');

To

$('#v-nav>ul>li:eq(4)').removeClass('class');

Its better to assign the element returned by your selector to do the same processing again to get desired element.

$(function () {
    var items = $('#v-nav>ul>li')

       $('#v-nav>ul>li').click(function () {
          if ($(this).index() = 8)
          {
             $(items).eq(4).removeClass('class');
          }
       });
});

There's no need to iterate with each(), as each element already has an index, and using eq() will let you select elements based on the index they have in the DOM. This solution is dependant on the elements being siblings() etc.

$(function () {
    var elems = $('#v-nav>ul>li');

    elems.on('click', function() {
        if ($(this).index()==8) elems.eq(4).removeClass('class');
    });
});

You could also just bind the click to that one element:

$(function () {
    $('#v-nav>ul>li:eq(7)').on('click', function() {
         $(this).siblings().filter(':eq(4)').removeClass('class');
    });
});

Otherwise I would just do:

$(function () {
    var elems = $('#v-nav>ul>li');
    $.each(elems, function(idx, elm) {
        if (idx==8) elems.eq(4).removeClass('class');
    });
});

As a sidenote ID's consisting of just a number (or starting with a number) is invalid.

Actually you don't need to iterate over all the li elements, instead you can do it like this way

$(function(){
  $('#v-nav>ul>li').eq(7).on('click', function(){ // eq(7) is 8th li
    $(this).closest('ul').find('li').eq(4).removeClass('cls'); //eq(4) is 5th li
  });
});

DEMO.