Question 10753 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

what the jquery code does below is it only clears the textbox

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

how do I append the text to its own container without being appended to the other?

Tags:

4

Answers


  1. 0

    Your selectors are a bit broken – presumably you want each + to only append the value of its associated .someText. Is this what you had in mind?

    $(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>
    Login or Signup to reply.
  2. 0

    You want to use $(this) – your current selector is trying to find a container inside this but the container is the parent so you need to traverse up the tree, not down it.

    Below I have switched out to use the event and it’s current target e.currentTarget instead of this

    $(".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>
    Login or Signup to reply.
  3. 0

    Use closest(".container") to select a parent container (and not any of its siblings), see https://api.jquery.com/closest/#closest-selector

    Also, to get the input text, make sure to select only the <input> next to the "+" control by using siblings(), see https://api.jquery.com/siblings/#siblings-selector

    $(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>
    Login or Signup to reply.
  4. 0

    You should use jQuery function .closest() to get the parent and then find the input text placed inside this parent. Like this, you will get only the target input and not all.

    Try this code :

    $(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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search