CODEWITHSUNDEEP
jquerylistclass
Dodong
Dodong

Reputation: 41

Any easy or shorter way of going through list in jquery?

Basically, i have 4 list. Whichever list is clicked, i want to add a class, if other list where clicked, i want to remove the class from other list. just want to apply it to the one have been clicked.

  <script>
    $(document).ready(function(){
      $("#li1").click(function(){
            document.getElementById('li1').classList.add('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');
      });

      $("#li2").click(function(){
            document.getElementById('li2').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li3").click(function(){
            document.getElementById('li3').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li4").click(function(){
            document.getElementById('li4').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');   
      });


    });
</script>


    ---HTML----
    <ul>
         <li id="li1"> some text here </li>
         <li id="li2"> some text here </li>
         <li id="li3"> some text here </li>
         <li id="li4"> some text here </li>
    </ul>

Upvotes: 0

Views: 70

Answers (3)

The Alpha
The Alpha

Reputation: 146201

You may try something like this (DEMO)

HTML:

<ul id="list1">
    <li class='current'>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul id="list2">
    <li class='current'>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JS::

$('#list1 > li').add('#list2 > li').on('click', function(){
    $(this).siblings().removeClass('current');
    $(this).addClass('current');
});

Or, maybe this one (DEMO)

$('#list1 > li').add('#list2 > li').on('click', function(){
    $('ul[id^="list"] > li').siblings().removeClass('current');
    $(this).addClass('current');
});

Upvotes: 0

moonwave99
moonwave99

Reputation: 22817

Without seeing your markup:

var $lists = $('[id^="li"]');

$lists.click(function(){
  $lists.removeClass('focus');
  $(this).addClass('focus');
});

Upvotes: 0

Mike Manfrin
Mike Manfrin

Reputation: 2762

$('li').click(function(event){
  $('li').removeClass('focus');
  $(event.target).addClass('focus');
})

This removes all 'focus' classes and then adds it to the clicked li.

More reading: http://api.jquery.com/event.target/

Upvotes: 2

Related Questions