CODEWITHSUNDEEP
jqueryhtml
Kosmos Web Design
Kosmos Web Design

Reputation: 103

How to target cloned element in DOM (jQuery)

Here is my markup: 

<div class="main">
    <div class="box">
        <div class="box_content">
            <div class="box_price">180</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">130</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">270</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
</div>

<div class="container">

</div>

<div class="cost"></div>

So I've cloned and appended some of the .box divs in jQuery from .main to .container using this code:

$(document).ready(function(){
"use strict";
    $(".box_button").click(function(){

        var box_content = $(this).parents('.box').clone(); //Box is cloned
        var price = $(box_content).find(".box_price");

        $(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price
        $(box_content).append('.container'); //Box is appended
    });
});

Before appending, I changed the class of the child element .box_price to .sc_box_price.

I have another code, which is supposed to calculate the sum of all .sc_box_price and append it to .cost.

$(document).ready(function(){
"use strict";

    var box_price = $(".sc_box_price");
    var total = 0;

    $(box_price).each(function(){
        total += parseInt($(this).text());
    });
    $('.cost').prepend("<div class='cost'>"+total+"</div>");
    console.log(total);
});

For some reason I am unable to target .sc_box_price. Perhaps it is because .sc_box_price is not actually added to the DOM? How do I fix this?

Upvotes: 3

Views: 804

Answers (3)

Marcos Alexandre Sedrez
Marcos Alexandre Sedrez

Reputation: 537

There are many erros in your code. What was the idea? Something like this:

$(document).ready(function(){
"use strict";
    $(".box_button").click(function(){

      var box_content = $(this).parents('.box').clone();
      var price = box_content.find(".box_price");

      price.toggleClass('box_price sc_box_price'); 
      
      $('.container').append(price);  
      //box_content.append('.container'); //Box is appended
      
      var box_price = $(".sc_box_price");
      var total = 0;

      box_price.each(function(){
        total += parseInt($(this).text());
      });
      
      $('.cost').html("Total:"+total);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="box">
        <div class="box_content">
            <div class="box_price">180</div>
            <div class="box_button">Add to Cart</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">130</div>
            <div class="box_button">Add to Cart</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">270</div>
            <div class="box_button">Add to Cart</div>
        </div>
    </div>
</div>

<div class="container">
  </br>
  Cart:
</div>

<div class="cost"></div>

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281646

Instead of append() your need to use appendTo to append your cloned box.

There is difference between appendTo and append i.e

take this new thing and appendTo an already existing thing
vs
take already existing thing and append this new thing

Thats why you need to use appendTo()

now after appending add your other code into the onClick event after appendTo statement Also instead of appending a div everytime your can just change the text of the cost div. I suppose this is what your want.

$(document).ready(function(){

    $(".box_button").click(function(){
        
        var box_content = $(this).parents('.box').clone(); //Box is cloned
        var price = $(box_content).find(".box_price");

        $(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price
        
        $(box_content).appendTo('.container'); //Box is appended
      
         var box_price = $(".sc_box_price");
          var total = 0;

          $(box_price).each(function(){
              total += parseInt($(this).text());
          });
          
          $('.cost').text(total);
          
          });
    
    
});
.cost {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="box">
        <div class="box_content">
            <div class="box_price">180</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">130</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">270</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
  
   
</div>

<div class="container">

</div>

<div class="cost"></div>

Upvotes: 1

MJH
MJH

Reputation: 2307

Your append call is backwards. Try this.

Please note, though, that the appended "Click me" elements will have no click events associated with them. Is this your intention?

Also, I think you may want to use an html call on $('.cost') instead of append.

$(document).ready(function(){
"use strict";

    $(".box_button").click(function(){

        var box_content = $(this).parents('.box').clone(); //Box is cloned
        var price = $(box_content).find(".box_price");

        $(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price
        // $(box_content).append('.container'); //Box is appended
        $('.container').append(box_content); //Box is appended

        calculate_price();
    });
});

function calculate_price() {
    var box_price = $(".sc_box_price");
    var total = 0;

    $(box_price).each(function(){
        total += parseInt($(this).text());
    });
    $('.cost').html("<div class='cost'>"+total+"</div>"); // formerly: $('.cost').append
    console.log(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="box">
        <div class="box_content">
            <div class="box_price">180</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">130</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
    <div class="box">
        <div class="box_content">
            <div class="box_price">270</div>
            <div class="box_button">Click me</div>
        </div>
    </div>
</div>

<div class="container">

</div>

<div class="cost"></div>

Upvotes: 0

Related Questions