jQuery：找到所有<a> and modify them, probably missing &#39;this&#39; somewhere</a>

Question

基本上我需要找到网站中的每个元素，其中包含特定的节点值。为每个添加一个.roll类，并在节点内添加一个新的。

以下是我想要做的一个例子，以及出了什么问题：http://jsfiddle.net/7Zuax/2/

HTML：

<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>

CSS：

.red {
    background: red;
}

JS：

// add .red to each <a> element
$('a').addClass('red');
// add a new <span> child into each found <a> element, but with the current <a>'s html();
$('a').html("<span data-title="+$('a').text()+">"+$('a').html()+"</span>");

// Why does all of the links have 'link 1' instead of 'link 1...2...3...4' ? ---->

结果： 链接1链接1链接1链接1

Answer 1

您可以使用each将一些代码应用于每个元素，但最直接的方法是将回调传递给html：

$('a').html(function(_,h){
     return '<span data-title="'+$(this).text()+'">'+h+'</span>';
});