聊天应用消息布局异常：如何替代ID实现批量消息左右定位

Let's break down the issues in your code and fix them step by step:

1. The Core Problem: Duplicate IDs & Incorrect Selectors #

• Duplicate id="side": HTML requires IDs to be unique, so your $("#side").each() only ever targets the first element with that ID.
• Missing class selector dot: $("msg-info-name") is invalid—you need .msg-info-name to target elements with that class.
• Targeting the wrong element: Using $("#side") inside the loop still only affects the first element, not the current one in the iteration.

2. Modified HTML (Remove Duplicate IDs) #

First, replace the duplicate id="side" with a shared class (e.g., msg-container) so we can target all message elements:

<div class="msg right-msg msg-container"> 
 <div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"></div> 
 <div class="msg-bubble"> 
  <div class="msg-info"> 
   <div class="msg-info-name">{{ chat.user }}</div> 
   <div class="msg-info-time"></div> 
  </div> 
  <div class="msg-text">{{ chat.message }}</div> 
 </div> 
</div>

3. Fixed JavaScript Code #

Now we'll iterate over all message containers, check each message's user, and adjust alignment dynamically:

// Iterate over every message container
$(".msg-container").each(function() { 
  // Get the username of the current message (trim to avoid whitespace issues)
  const userName = $(this).find(".msg-info-name").text().trim();
  
  // Compare with current user (me) and adjust classes
  if (userName !== me) { 
    // Use $(this) to target ONLY the current message in the loop
    $(this).removeClass("right-msg").addClass("left-msg"); 
  }
});

Key Improvements Explained #

• Class-based targeting: Using .msg-container lets us select all message elements, not just the first one.
• $(this) context: Inside the each() loop, $(this) refers to the current message element, so we're modifying only that message's classes.
• find() method: This searches for .msg-info-name only within the current message element, preventing conflicts with other messages.
• trim(): Ensures any accidental whitespace in the username doesn't break the equality check.

Bonus: Handling Dynamic Messages #

If you load messages dynamically (e.g., after an API call), make sure to run this code after the new messages are added to the DOM. For example:

// Example: After fetching new messages
function loadNewMessages() {
  // ... your code to append new messages to the DOM ...
  
  // Re-run the alignment logic
  $(".msg-container").each(function() { 
    const userName = $(this).find(".msg-info-name").text().trim();
    if (userName !== me) { 
      $(this).removeClass("right-msg").addClass("left-msg"); 
    }
  });
}

内容的提问来源于stack exchange，提问作者user13932636