如何在jQuery中定位$(this)内特定元素并仅向首个.pop容器添加popMessage

咱们先把原代码里的几个明显问题捋清楚，再给你上能直接用的修正代码：

原代码的核心问题 #

• 文本判断用了赋值符号=，而不是比较符号===——这会直接把元素文本改成"Property damage"，而且永远返回true，逻辑完全错了
• jQuery对象不能直接用原生DOM的textContent属性，得用$(this).text()来获取元素文本
• 全局调用$(".pop")会把内容加到所有.pop容器里，而不是当前鼠标悬停的列表项内部的那个
• 没做重复添加的判断，鼠标多次移进去会重复创建#popMessage元素，导致DOM冗余

修正后的完整代码 #

$(".list-group-item").mouseenter(function(){
  // 先获取当前列表项的文本，去除首尾空格避免空格干扰判断
  const itemText = $(this).text().trim();
  // 用严格比较判断文本内容
  if(itemText === "Property damage") {
    // 精准定位当前元素内部的首个.pop容器
    const $targetPop = $(this).find(".pop").first();
    // 检查容器里是否已经有popMessage，避免重复追加
    if(!$targetPop.find("#popMessage").length) {
      $targetPop.append(`<div id='popMessage'><b>Appended text</b><img id='theImg' src='https://d30y9cdsu7xlg0.cloudfront.net/png/181436-200.png'/></div>`);
    }
  }
});

关键修正细节说明 #

• 文本判断逻辑修复：用$(this).text().trim()获取当前元素的文本并去除首尾空格，再用===做严格比较，避免因HTML里的空格导致判断失效
• 精准定位目标容器：通过$(this).find(".pop")只查找当前鼠标进入的list-group-item内部的.pop元素，再加上.first()确保只操作首个匹配的容器，完全符合你“仅添加到首个class为pop的容器”的需求
• 防止重复添加：通过$targetPop.find("#popMessage").length检查目标容器里是否已经存在#popMessage元素，只有不存在的时候才执行追加操作，避免鼠标多次进入重复创建
• 代码可读性优化：用ES6的模板字符串（反引号`）包裹HTML片段，比传统双引号更易读，后续修改内容也更方便

对应的完整HTML结构参考：

<li class="list-group-item">Property damage<div class="pop"></div></li>
<li class="list-group-item">Personal injury<div class="pop"></div></li>

这样修改后，就完全满足你的两个需求：1. 仅操作当前鼠标进入元素内部的特定容器；2. 只把popMessage添加到该元素内的首个.pop容器中，且不会重复添加。

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