Set class to selected
tag dynamically

Question

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?

Shafiqul Islam · Answer 1 · 2017-12-26T09:05:37.273

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>

score 1 · Accepted Answer · answered Dec 26 '17 at 08:26

1

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

answered Dec 26 '17 at 08:26

gurvinder372

66,980
10
72
94

Hey any ideas on how to set the addClass() to first li item only? – Dec 27 '17 at 01:00
You can use `:first` selector. – gurvinder372 Dec 27 '17 at 01:02
Hey is there any way to set the li to active class based on an index rather than the first one? – Jan 14 '18 at 08:51
Yes, try `eq` selector. – gurvinder372 Jan 14 '18 at 08:54

score 0 · Answer 3 · answered Dec 26 '17 at 08:26

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

Ankit Agarwal · Answer 4 · 2017-12-26T08:31:12.567

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>

score 0 · Answer 5 · answered Dec 26 '17 at 08:31

0

You can add active class like this :

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

answered Dec 26 '17 at 08:31

Pradeep

140
9

Set class to selected tag dynamically

5 Answers5

Set class to selected
tag dynamically