获取div的所有内容，包括新输入

问题描述

我有3个输入的div：

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">
  </div>
</div>

将num1的结果添加到num2并放入总文本框中。 我用它来添加

$( "#calculate" ).on( "click", function() {
            num1 = $("#num1").val();
            num2 = $("#num2").val();
            total = parseInt(num1) + parseInt(num2);
            $("#total").val(total);
    });

我使用以下代码获取html内容：

var cont = $('.getThis').html();

但它只会获取内容，而不会像这样的标题那样包含文本框的值

<div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">

我希望结果应该是：标题

<div>ID</div>
  <div>Name</div>
  <p>Content here....</p>
  <input type="text" id="num1" value="OfWhatIInput"> + 
  <input type="text" id="num2" value="OfWhatIInput"> = 
  <input type="text" id="total" value="OfWhatIsTheResult">

我已经通过使用keyup事件来做到这一点。 您输入的任何更改将直接反映在您的总和中。

我通过在您的输入样式上添加class="demo"进行了一些更改

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" class="demo" id="num1"> + 
    <input type="text" class="demo" id="num2"> = 
    <input type="text" id="total">
  </div>
</div>

你的JS

$(document).ready(function(){
  $(".demo" ).keyup(function() {
     var textInput1 = $('#num1').val();
     var textInput2 = $('#num2').val();
     var total = parseInt(textInput1) + parseInt(textInput2); 
    //erase parseInt and check srting input addition
     $('#total').val(total);
  });
});

您也可以在这里找到解决方案

var sum=$('#num2).val()+$('#num2).val();
$('#total).val(sum);

要获取文本框的值，您需要使用上述方法。

var num1 = $('#num1').val();
var num2 = $('#num2').val();
var total = $('#num1').val()+$('#num2').val();
$('#total').val(total);

尝试如下所示的完整示例：

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">
    <input type="button" name="click" id="click" onclick="a()">
  </div>
  <script src="http://x.dpstatic.com/j/jquery/jquery-1.11.0.min.js"></script>
  <script>
  function a(){
        var num1 = $('#num1').val();
        var num2 = $('#num2').val();
        var total = parseInt($('#num1').val())+parseInt($('#num2').val());
        $('#total').val(total);
}
  </script>

让我知道是否需要更多信息。

谢谢阿米特

我认为1 hack是为了

 $('button').click(function() { var cont = $('.getThis').clone().find('input:text').attr('value', function() { return this.value; }).end().html(); snippet.log(cont) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <div class="excelPreview"> <a href="#" id="getContent" class="btn btn-primary">get</a> <a href="#" id="calculate" class="btn btn-primary">calculate</a> <div class="getThis"> Title <div>ID</div> <div>Name</div> <p>Content here....</p> <input type="text" id="num1" />+ <input type="text" id="num2" />= <input type="text" id="total" /> </div> </div> <button>Test</button>