Question

以下工作正常，但是当我将html添加到textarea中时，我也将div包装在另一个div中，打破了布局。

＆＃13;

var urls = [];
$('body').on('click', '.btn_video', function() {
  var $myVideo = $(this).parent().parent().wrap('<div class="col-xs-12 col-md-6"/>');
  var $myVideoWrapped = $($myVideo.parent().parent());
  console.log($myVideoWrapped.html());
  urls.push($myVideoWrapped.html());
  $('#usp-custom-5').text(urls.join(' '));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6">
   <div class="thumbnail">
     <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/V9GsS-aMVNs" frameborder="0" allowfullscreen=""></iframe>
     </div>
    <div class="caption">
      <p>Duration: <span class="video-time">10:35</span></p>
      <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
    </div>
   </div>
  </div>

＆＃13;

我想要实现的是在按下按钮时将整个html放入文本区域而不更改布局，基本上将其放入textarea：

<div class="col-xs-12 col-md-6">
   <div class="thumbnail">
     <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/V9GsS-aMVNs" frameborder="0" allowfullscreen=""></iframe>
     </div>
    <div class="caption">
      <p>Duration: <span class="video-time">10:35</span></p>
      <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
    </div>
   </div>
  </div>

Answer 1

最后，我使用.prop()和outerHTML

解决了这个问题

$('body').on('click', '.btn_video', function() {
   var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
   $('#usp-custom-5').val(function(_, currentValue) {
      return currentValue + $imageSelected
    });
 });

如何将选定div的html内容添加到textarea？

1 个答案: