jQuery - 为每个元素获取标记文本并输出它

Question

输入HTML

<h2>A random title</h2>
<h3>Another cool title</h3>

所需的HTML输出

<h2 class="ghost" data-titre="A random title">A random title</h2>
<h3 class="ghost" data-titre="Another cool title">Another cool title</h3>

jQuery我正在使用

var ghost = $('h2, h3');
ghost.attr('data-titre',ghost.text());
ghost.addClass('ghost');

结果我得到了：

<h2 class="ghost" data-titre="A random title Another cool title">A random title</h2>
<h3 class="ghost" data-titre="A random title Another cool title">Another cool title</h3>

Answer 1

您可以设置该类，然后将attr与回调

一起使用

$('h2, h3').addClass('ghost').attr('data-titre', function() {
    return $(this).text()
});


console.log( document.body.innerHTML )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>A random title</h2>
<h3>Another cool title</h3>

Answer 2

遍历每个元素以添加文本和类。

var ghost = $('h2, h3');
ghost.each(function() {
 $( this ).attr('data-titre',$(this).text());
 $( this ).addClass('ghost');
});