jQuery如何将.param-value类元素的内容赋值给其data-content属性

需要为所有类名为.param-value的元素添加popover，通过jQuery实现以遵循DRY原则。

如何将元素的data-content属性值设置为该元素自身的内容？
预期效果示例：

<p class="param-value" [...] data-content="Example Data 1">Example Data 1</p>

尝试使用$(this).html()获取内容，但当前场景不是事件handler，无法通过该方式获取对应元素的内容。

HTML代码 #

<div class="param-row row">
    <div class="col-3"><p class="param-name">Example Label 1</p></div>
    <div class="col-3"><p class="param-value">Example Data 1</p></div>
    <div class="col-3"><p class="param-name">Example Label 2</p></div>
    <div class="col-3"><p class="param-value">Example Data 2</p></div>
</div>
<div class="param-row row">
    <div class="col-3"><p class="param-name">Example Label 3</p></div>
    <div class="col-3"><p class="param-value">Example Data 3</p></div>
    <div class="col-3"><p class="param-name">Example Label 4</p></div>
    <div class="col-3"><p class="param-value">Example Data 4</p></div>
</div>

原JS代码 #

$(function () {
    $('[data-toggle="popover"]').popover({'trigger':'hover'})
})

$('.param-value').attr('data-container','body')
$('.param-value').attr('data-toggle','popover')
$('.param-value').attr('data-placement','bottom')
$('.param-value').attr('data-html','true')
$('.param-value').attr('data-content',$(this).html())

原代码存在两个问题：

1. 全局作用域下的$(this).html()中的this指向window对象，无法匹配到.param-value元素
2. 属性设置逻辑写在DOM ready回调外，可能出现DOM未加载完成、元素匹配失败的问题

可以使用jQuery attr方法的回调参数实现需求，修改后的JS代码如下：

$(function () {
    // 批量设置公共属性
    $('.param-value').attr({
        'data-container': 'body',
        'data-toggle': 'popover',
        'data-placement': 'bottom',
        'data-html': 'true'
    // 为每个元素单独设置data-content，回调函数内this指向当前遍历的元素
    }).attr('data-content', function() {
        return $(this).html()
    })
    // 属性设置完成后再初始化popover
    $('[data-toggle="popover"]').popover({'trigger':'hover'})
})

内容的提问来源于stack exchange，提问作者Lewis