Question

我可以从不同的tabs获取那些输入值，但是有什么方法可以将它们放入这样的新创建的div中吗？

<div class="added-field">
 //<h4> input.val() </h4>
 //<p> textarea.val()</p>
</div>

$(document).ready(function(){

  $(document).on('click', '#saveField', function(e){
    
    var tab = $(this).parents('.tab-content');

    tab.find('.tab-pane').each(function(index, element){
      if ( !$(element).find('input').val() ) {
        return false;  
      } else {
        tab.append($('<h4>').text($(element).find('input').val()));  
      }
      if ( !$(element).find('textarea').val() ) {
        return false;  
      } else {
        tab.append($('<p>').text($(element).find('textarea').val())); 
      }
      tab.children('.tab-pane').remove();
      tab.children('ul').remove();
    });
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<ul class="nav nav-pills" role="tablitst">
  <li class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab">A</a></li>
  <li><a href="#b" aria-controls="b" role="tab" data-toggle="tab">B</a></li>
  <li><a href="#c" aria-controls="c" role="tab" data-toggle="tab">C</a></li>
  <li><a href="#d" aria-controls="d" role="tab" data-toggle="tab">D</a></li>
  <li><a href="#e" aria-controls="e" role="tab" data-toggle="tab">E</a></li>
</ul>

<div class="tab-content" id="field">
  <div role="tabpanel" class="tab-pane active" id="a">
    <div id="AA">
      <div class="free-text">
        <h4>aaaa</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>bbbb</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="b">
    <div id="BB">
      <!-- free text -->
      <div class="free-text">
        <h4>cccc</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>dddd</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="c">
    <div id="CC">
      <div class="free-text">
        <h4>eeee</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>ffff</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="d">
    <div id="DD">
      <div class="free-text">
        <h4>gggg</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>hhhh</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="e">
    <div id="FF">
      <div class="free-text">
        <h4>iiii</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>jjjj</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <ul class="list-inline">
    <li><a href="#">cancel</a></li>
    <li><a href="#" id="saveField">save</a></li>
  </ul>
</div>

Answer 1

这样可行：

$('#test').append( $('<h4></h4>').html($('#myInput').val()) );
$('#test').append( $('<p></p>').html( $('#myTextarea').val())  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" value="My Heading"/>
<textarea type="text" id="myTextarea"> All my cool stuff goes here</textarea>
<div id="test"></div>

如何将输入值附加到创建的元素？

1 个答案: