Javascript 为后续的每条聊天消息提供一个交替类，但所有消息都得到相同的类

我有一个简单的节点JS聊天应用程序。我在前端使用express、mongodb、socket.io和jQuery

一切正常，但我希望其他每一条信息都有不同的颜色和对齐方式

以下是CSS类：

  .blueText {
  text-align:left;
  color: #00F;
  }
 .greenText {
  text-align:right;
  color: #0F0;
  }

这是相关的JS函数：

socket.on('message', addMessages)
  function addMessages(message){

    if ($( "li:odd" )) {
      $("#messages").append(`<li class='blueText'> ${message.name} </li> <p> 
    ${message.message} </p> <span> ${message.id} </span>`)
   }
   else {
    $("#messages").append(`<li class='greenText'> ${message.name} </li> <p> 
   ${message.message} </p> <span> ${message.id} </span>`)
   }}

socket.on（'message'，addMessages）
函数addMessages（消息）{
如果（$（“li:奇数”））{
$（“#messages”）.append（`li class='blueText'>${message.name}
${message.message}
${message.id}`）
}
否则{
$（“#messages”）.append（`li class='greenText'>${message.name}
${message.message}
${message.id}`）
}}

发生的事情是，所有消息都得到blueText类

另一件事是，如何为每个用户获得唯一的颜色。

如果（$（“li:odd”）语句总是正确的，即使文档中没有

li

元素

$（'yourselector'）

始终返回一个对象，即使您搜索的元素在文档中不存在（只需在浏览器控制台中

console.log（$（'nonexistingelement'））

即可查看返回的对象）

然后，如果我理解的话，您希望所有其他用户使用与当前用户不同的颜色和对齐方式。所以这个片段应该是这样的：

socket.on('message', addMessage)

function addMessage(message){
  const messageClass = message.user === currentUser ? 'blueText' : 'greenText' 
  // REPLACE TERNARY STATEMENT WITH YOURS, MATCHING YOUR DATA STRUCTURE
  $("#messages").append(`<li class="${messageClass}"> ${message.name} </li> <p> 
  ${message.message} </p> <span> ${message.id} </span>`)
}

socket.on（'message'，addMessage）
函数addMessage（消息）{
const messageClass=message.user==currentUser？'blueText'：'greenText'
//将三元语句替换为与数据结构匹配的语句
$（“#messages”）.append（`li class=“${messageClass}”>${message.name}
${message.message}
${message.id}`）
}

即使文档中没有

li

元素，if（$（“li:odd”）语句始终为真

$（'yourselector'）

始终返回一个对象，即使您搜索的元素在文档中不存在（只需在浏览器控制台中

console.log（$（'nonexistingelement'））

即可查看返回的对象）

然后，如果我理解的话，您希望所有其他用户使用与当前用户不同的颜色和对齐方式。所以这个片段应该是这样的：

socket.on('message', addMessage)

function addMessage(message){
  const messageClass = message.user === currentUser ? 'blueText' : 'greenText' 
  // REPLACE TERNARY STATEMENT WITH YOURS, MATCHING YOUR DATA STRUCTURE
  $("#messages").append(`<li class="${messageClass}"> ${message.name} </li> <p> 
  ${message.message} </p> <span> ${message.id} </span>`)
}

socket.on（'message'，addMessage）
函数addMessage（消息）{
const messageClass=message.user==currentUser？'blueText'：'greenText'
//将三元语句替换为与数据结构匹配的语句
$（“#messages”）.append（`li class=“${messageClass}”>${message.name}
${message.message}
${message.id}`）
}

您不需要任何JavaScript或JQuery就能让组中的每个其他元素使用不同的CSS样式。只需使用CSS选择器：

li:n个孩子（奇数）{
颜色：红色；
}
李：第n个孩子（偶数）{
颜色：蓝色；
}

项目
项目
项目
项目
项目
项目

您不需要任何JavaScript或JQuery就能让组中的每个其他元素使用不同的CSS样式。只需使用CSS选择器：

li:n个孩子（奇数）{
颜色：红色；
}
李：第n个孩子（偶数）{
颜色：蓝色；
}

项目
项目
项目
项目
项目
项目

您不希望用户能够连续发送多条消息吗？在这种情况下，这个偶数/奇数方法可能不是您正在寻找的解决方案，因为您认为您的

$（“li:odd”）

选择器不能按预期的方式工作。您的条件是检查JQuery对象中是否返回了奇数的列表元素。您要检查

长度是偶数还是奇数<代码>（$（“li”）。长度%2==0）

如果（$（$（“li:奇数”））{

将始终是

true

只要您至少有一个

li

，因为您没有检查任何特定的

li

，您只是检查是否有任何奇怪的索引

li

元素。谢谢大家，顺便问一句，我如何检查特定的li，只需询问.Event.target和“this”在这种情况下，看起来不像选项。您不希望用户能够连续发送多条消息吗？在这种情况下，这种偶数/奇数方法可能不是您考虑的解决方案。

$（“li:odd”）

选择器不能按预期方式工作。您的条件是检查JQuery对象中是否返回了奇数的列表元素。您要检查

长度是偶数还是奇数。
（$（$）.length%2==0）
如果（$（$（$li:odd）））{
将始终是
true
只要您至少有一个
li
，因为您没有检查任何特定的
li
，您只是检查是否有任何奇怪的索引
li
元素。谢谢大家，顺便问一句，我如何检查特定的li，只需询问.Event.target和“this”在这种情况下，看起来不要像选项。这可能是一个很好的用例解决方案，但它不是一个很好的堆栈溢出答案，因为它没有解决实际问题，也没有对它的作用和原因进行任何解释。如果你想的话，我会评论，但很明显，如果它是明显的，那么这个问题就不会是这样了ked。请阅读。我回答的原因很明显，而不是问题。但你是对的，我添加了解释，对不起。回答很明显，但我从哪里获得当前用户？这可能是一个很好的用例解决方案，但不是一个很好的堆栈溢出答案，因为它没有解决实际问题，也没有包含任何解释我会发表评论，如果你愿意的话，但是很明显如果很明显，那么这个问题就不会被问到。请阅读。我回答的原因很明显，而不是问题。但是你是对的，我添加了解释，对不起。回答很明显，但是我从哪里得到当前用户？