如何获取点击控件的所有html内容？

Question

我知道如何获取点击控件的内容,但现在情况有点复杂,特别是我有一个像这样的容器:

<div id='wizard-frame-1'>
 <div class="available_services">
      <div class="available_service-row" data-id="1">
            <strong>Taglio capelli</strong>
                <br>Durata: 20 - Prezzo: 50.00 €<br>
       </div><hr>
       <div class="available_service-row" data-id="2">
             <strong>Colore capelli</strong>
                 <br>Durata: 50 - Prezzo: 30.00 €<br>
       </div><hr>
       <div class="available_service-row" data-id="3">
             <strong>Trattamenti viso</strong>
                 <br>Durata: 30 - Prezzo: 15.00 €<br>
        </div><hr>
  </div>
</div>

这是JScrollPane 的结果
现在我要做的是将选定的行传递available_service-row给另一个JScrollPane:

<div id='wizard-frame-1'>
     <div class="services_added"></div>
</div>

我试过的是这个:

$(document).on('click', '#wizard-frame-1 .available_service-row', function()
{
      console.log($(this).html());
});

但返回的结果是:

<strong>Colore capelli</strong><br>Durata: 50 - Prezzo: 30.00 €<br>

你怎么看到只有被点击的div行的内容,我需要得到父容器,所以div,在这种情况下,我正在等待这个结果:

<div class="available_service-row" data-id="1">
       <strong>Taglio capelli</strong>
       <br>Durata: 20 - Prezzo: 50.00 €<br>
</div>

我不知道这是否是一种正确的方法.例如,当我使用select我可以复制.clone()方法的选项,但现在情况是不同的.建议？

Answer 1

要获取元素outerHTML:

this.outerHTML

在jq中(使用jQuery时代码一致性):

$(this).prop('outerHTML');