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

I know how to get the content of the clicked control but now the situation is a bit complicated, in particular I've a container like this:

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

<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>

this is a result of JScrollPane
Now what I'm trying to do is pass the selected row available_service-row to another JScrollPane:

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

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

What I tried is this:

我试过的是这个:

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

But the result returned is this:

但结果返回的是:

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

How you can see there is only the content of the clicked div row, I need to get also the parent container, so the div, in this case I'm waiting this result:

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

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

I don't know if this is a correct way to do this. For example when I used the select I can copy the option like .clone() method, but now the situation is different. Suggestions?

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

1 个解决方案

#1

To get element outerHTML:

要获取元素outerHTML:

this.outerHTML

In jq (for code consistency while using jQuery):

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

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

#1