How to make a list item that's clicked on change color?

Question

I currently have an UL list structure and i'd like to make the selected item's background change, thus giving confirmation which was selected. I want to do it in a click JQuery method. That's currently the code I have, which select and gets the necessary data, associated with my items in the list. I have configured a CSS for the first child and I want to make the selected item the list's first child, inside this function. The function does a few things, but they're irrelevant to the question, hence why I've removed them.

Picture of my system

    $(document).on('click', 'li.msg-user-name-wrap', function() {

                clearInterval(loadTimer);
                var otheridFromSearch = $(this).data('profileid');
                var searchImage = $(this).find('.msg-user-photo img').attr('src');
                var searchName = $(this).find('.msg-user-name').text();
                $('.users-right-pro-pic img').attr('src', searchImage);
                $('.users-right-pro-name').text(searchName);
                $('.user-info').attr("data-otherid", otheridFromSearch);
                xyz(useridd, otheridFromSearch, abc);

                $.post('http://localhost/facebook/core/ajax/message.php', {
                    showmsg: otheridFromSearch,
                    yourid: useridForAjax
                }, function(data) {
                    $('.msg-box').html(data);
                    $('.user-show').empty();
                    $('.top-msg-user-photo img').attr('src', searchImage);
                    $('.top-msg-user-name').text(searchName);
                    scrollItself();
                })

                if (!intervalId) {
                    intervalId = setInterval(function() {
                        loadMessageFromSearch(useridForAjax, otheridFromSearch);
                    }, 1000);
                    clearInterval(intervalIdtwo);
                    intervalIdtwo = null;
                } else if (!intervalIdtwo) {
                    clearInterval(intervalId);
                    intervalId = null;
                    intervalIdtwo = setInterval(function() {
                        loadMessageFromSearch(useridForAjax, otheridFromSearch);
                    }, 1000);
                } else {
                    alert('Nothing found');
                }

            })

Answer 1

If I understand correctly, you want to detect a click on an item, and then move that item in the first place:

 $("ul > li").click(function () { $(this).parent().prepend(this); });

 li:first-child { background: yellow } ul { cursor: pointer }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul>

If you don't want to change the order, but just highlight the most recently selected item, then you cannot use first-child as CSS selector, as "first" really means first in order. Then instead you must mark the selected item in some other way (than moving it), for example by giving it a certain class attribute:

 $("ul > li").click(function () { $(this).siblings().removeClass("selected"); $(this).addClass("selected"); });

 li.selected { background: yellow } ul { cursor: pointer }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul>

Answer 2

As I had misunderstood the first-order property, I came up with this code snippet to do what I needed, where msg-user-add is the parent of my list: it's the class I use to populate the items of the list.

$(document).on('click', 'ul.msg-user-add > li', function() {
    $('ul.msg-user-add > li').css("background-color", "#e9ebee");
    $(this).css('background-color', 'lightgray');
}

Answer 3

Something like this?

$(document).on('click', 'li.msg-user-name-wrap', function() {
         $(this).css({'background': '#123456'});
   });