CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7691120
user7691120

Reputation:

Set class to selected <li> tag dynamically

I was having some troubles when trying to set the on click listerner for <li> dynamically. Here is my code to populate the list:

for(var i = 0; i < chatlist.length; i++){
        $('<li class="contact"><div class="wrap"><div class="meta"><p class="name">' + contact + '</p><p class="preview">' + preview + '</p></div></div></li>').appendTo($('#contacts ul'));
    }

On click listener for selected row:

    $('#contacts').on('click', 'li', function() {
        var index = $(this).index();
        console.log(index);
   });

I am using this template. Upon selecting row, I wanted to set the selected <li> tag to 

<li class = 'contact active'></li>

I managed to get the selected row index but I not sure how to set the HTML class for selected <li>. Any idea?

Upvotes: 2

Views: 5788

Answers (5)

Shafiqul Islam
Shafiqul Islam

Reputation: 5690

try this code which add active class and also i add css to check different 

 $(document).ready(function(){
        $('.list li').click(function() {
             $( '.list li' ).removeClass( "active" ); // remove active class from all li 
            $(this).addClass('active'); // add active class for click li
        });
    });
.active {
color:red;
}
   li {
   cursor: pointer;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
            <li>Test 5</li>
            <li>Test 6 </li>
            <li>Test 7</li>
        </ul>

Upvotes: 1

Pradeep
Pradeep

Reputation: 140

You can add active class like this : 

$(this).addClass('active');

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can add your jquery logic in such a way that will remove the active class from all li inside contacts id and then add the active class to the li that has been clicked which you can get from the index of the li like:

var clickedLi = $('#contacts ul li')[index];

or use $(this) instead. Please check the attached snippet.

var chatlist = new Array(3);
var contact = 'contact';
var preview = 'preview';
for(var i = 0; i < chatlist.length; i++){
    $('<li class="contact"><div class="wrap"><div class="meta"><p class="name">' + contact + '</p><p class="preview">' + preview + '</p></div></div></li>').appendTo($('#contacts ul'));
}

$('#contacts').on('click', 'li', function() {
    var index = $(this).index();
     $('#contacts ul li').each(function(){
       $(this).removeClass('active');
     });
    
    $(this).addClass('active');
    
});
.active{
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contacts">
			<ul>
      </ul>
</div>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

I managed to get the selected row index but I not sure how to set the HTML class for selected <li>. Any idea?

You can just addClass on the click event itself

$('#contacts').on('click', 'li', function() {
    $( "#contacts li" ).removeClass( "active" ); //assuming that it has to be removed from other li's, else remove this line
    $( this ).addClass( "active" );
});

Upvotes: 1

31piy
31piy

Reputation: 23859

In the click event handler, $(this) will point to the li element which was clicked. So you should be able to assign a class to it like this:

$('#contacts').on('click', 'li', function() {
  $(this).addClass("selected"); // Assign the class here
  var index = $(this).index();
  console.log(index);
});

Upvotes: 0

Related Questions