Javascript 如何制作一个'；单击“更改颜色”按钮？

我目前有一个UL列表结构，我想更改所选项目的背景，从而确认所选项目。我想用clickjquery方法来实现它。这就是我目前拥有的代码，它选择并获取与列表中的项目相关联的必要数据。我已经为第一个子项配置了CSS，我想在这个函数中使所选项成为列表的第一个子项。函数做了一些事情，但它们与问题无关，因此我删除了它们

像这样的

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

---

如果我理解正确，您希望检测到对某个项目的单击，然后首先移动该项目：

$（“ul>li”）。单击（函数（）{
$（this.parent（）.prepend（this）；
});
li:第一个孩子{背景：黄色}
ul{光标：指针}


一个
两个
三
四
由于我误解了
一阶
属性，我想出了这个代码片段来做我需要做的事情，其中
msg user add
是我列表的父级：它是我用来填充列表项的类

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

可以添加一些代码请
this.parentNode.insertBefore（this，this.parentNode.firstChild）
根据要求编辑的代码，我已经添加了我的系统图片。我的想法是，当我点击马丁·特里福诺夫的背景时，将其变成灰色，同时将格奥尔基·科列夫的盒子变成白色。颜色被设置为第一个孩子的css属性。通过在“我的单击”函数的开头包含您的代码，背景会发生变化，但用户的顺序也会发生变化，因此选中的颜色始终位于顶部。有没有办法让他们保持他们的位置，但也声明第一个孩子，或者我需要使用一个不同的背景颜色的方法？“第一个孩子”真的是指顺序。因此，如果这不是您想要的，那么您必须在CSS中使用不同的方式来标识所选项目。见我的补充答案。请注意，那么你的问题的标题是误导性的…谢谢你的补充。我刚刚进入网络开发领域，所有这些对我来说都是新鲜事，所以我一定没有正确理解第一个孩子的论点。我在我的帖子中添加了一个我自己能想到的方法，但我不知道这是否是最聪明的方法。像你那样直接在元素上使用css样式也可以。然而，最好的做法是为样式定义css类，然后使用它们。注意：问题不应包含答案。如果你愿意，你可以用这个解决方案发布一个答案。使用你的答案，我能够在我的代码中实现它，所以谢谢！我添加了一行代码，使背景对所有其他未单击的对象透明，以修复此问题。很好！更好的做法是：（1）使用CSS类来突出显示而不是显式样式（例如
背景色
），以及（2）不必指定非选定项的默认样式。删除突出显示样式就足够了。通过这种方式，您可以在希望更改页面样式的当天更容易地维护代码。很遗憾，您必须在代码中指定两次“msg user add”。
$(document).on('click', 'ul.msg-user-add > li', function() {
    $('ul.msg-user-add > li').css("background-color", "#e9ebee");
    $(this).css('background-color', 'lightgray');
}