如何将文本附加到其自己的 div 容器而不将其附加到另一个 div 容器？-解网

问：

jQuery代码在下面的作用是它只清除文本框

$(document).ready(function(){
   var someText = $(".someText");
   
   $(".add").on("click", function(){
      $(".container", this).append(someText.val());
      $(someText).val("");
   });
});

<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>

如何将文本附加到其自己的容器中而不附加到另一个容器？

jquery 附加此

0赞 freedomn-m 4/12/2023

仅供参考：（尚未提及任何答案）等同于 - 即走错了路;向下 DOM 树而不是向上。$(".container", this)$(this).find(".container")

答：

0赞 motto 4/12/2023 #1

你的选择器有点坏了——大概你希望每个 + 只附加其关联 .这是你的想法吗？.someText

$(document).ready(function(){
   $(".add").on("click", function(e){
      var container = $(this).closest(".container");
      var someText = $(".someText", container);

      container.append(someText.val());
      someText.val("");
   });
});

<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>

1赞 Pete 4/12/2023 #2

你想使用 - 你当前的选择器正在尝试在里面找到一个容器，但容器是父容器，所以你需要遍历树，而不是向下。$(this)this

下面我已经切换为使用该事件，它是当前目标而不是e.currentTargetthis

$(".add").on("click", e => {
  const $container = $(e.currentTarget).parent(); // get current container
  const $text = $container.find('.someText');     // get the text box

  $container.append($text.val());                 // append text to container
  $text.val("");                                  // clear input
});

<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>

0赞 Martin Lisowski 4/12/2023 #3

用于选择父容器（而不是其任何同级容器），请参阅 https://api.jquery.com/closest/#closest-selectorclosest(".container")

此外，若要获取输入文本，请确保使用仅选择“+”控件旁边的，请参阅 https://api.jquery.com/siblings/#siblings-selector<input>siblings()

$(document).ready(function(){
   
   $(".add").on("click", function(){
      var $inp = $(this).siblings("input");
      $(this).closest(".container").append($inp.val());
      $inp.val("");
   });
});

<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>

0赞 Mohamed Yedes 4/12/2023 #4

您应该使用 jQuery 函数 .closest（） 来获取父项，然后找到放置在此父项中的输入文本。像这样，您将只获得目标输入，而不是全部。

试试这段代码：

$(document).ready(function(){
    $(".add").on("click", function(){
        let container = $(this).closest(".container")
        let someText = container.find(".someText");
        
        container.append(someText.val());
        someText.val("");
    });
});

<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>

上一个：“this”隐式具有类型“any”，因为它没有类型注释（TypeScript）

下一个：如何从 C# 扩展方法中访问“this”？

如何将文本附加到其自己的 div 容器而不将其附加到另一个 div 容器？

how to append text to its own div container without appending it to the other div container?

评论