如何实现点击按钮仅将文本追加到所属div容器而非其他容器？

修改后的jQuery代码 #

$(document).ready(function(){
   $(".add").on("click", function(){
      // 获取当前点击按钮所属的container容器
      const $container = $(this).parent(".container");
      // 定位当前容器内的输入框
      const $input = $container.find(".someText");
      const inputVal = $input.val().trim();
      
      // 非空时才追加内容，避免空文本
      if(inputVal){
          $container.append(`<p>${inputVal}</p>`);
          $input.val("");
      }
   });
});

关键修改说明 #

• 上下文定位：不再全局选中所有.someText输入框，而是在点击事件中通过$(this)（当前点击的+按钮）向上找到父容器container，再在容器内查找对应的输入框，确保操作的是当前按钮所属的容器和输入框，不会干扰其他容器。
• 修正容器选择：原代码中$(".container", this)是在+按钮内部查找container，这是错误的——container是+按钮的父元素，所以改用$(this).parent(".container")准确获取父容器。
• 可选优化：增加了输入值的非空判断，避免点击+时追加空内容；用<p>标签包裹追加的文本，让每条内容独立成行，提升可读性。

原HTML结构无需修改 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
   <div class="add">+</div>
   <input class="someText" type="text">
</div>
     
<div class="container">
   <div class="add">+</div>
   <input class="someText" type="text">
</div>

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