如何为.double-text类元素设置data-content属性为自身文本内容？

你遇到的问题主要有两个关键点：一是类名拼写错误（你要操作的是.double-text，但代码里写成了.text-double），二是attr()方法的调用方式不对，导致this的上下文没有指向目标元素。

问题分析 #

你原来的代码：

$(function(){ $('.text-double').attr("data-content", $(this).text()); });

这里的$(this).text()执行时，this指向的是全局的window对象，根本拿不到目标元素的文本内容；再加上类名写错，导致没有元素被选中，自然不会有任何效果。

正确的解决方法 #

方法一：使用attr()的函数参数形式

jQuery的attr()方法支持传入函数作为属性值，这个函数会为每个匹配的元素执行一次，函数内部的this就指向当前遍历到的DOM元素。修正类名后，代码如下：

$(function(){
  $('.double-text').attr("data-content", function() {
    // 此处this指向当前的.double-text元素
    return $(this).text();
  });
});

方法二：用each()显式遍历元素

如果你更习惯直观的遍历逻辑，也可以用each()方法逐个处理元素：

$(function(){
  $('.double-text').each(function() {
    $(this).attr("data-content", $(this).text());
  });
});

这个方法会逐个遍历所有.double-text元素，为每个元素设置data-content属性为自身的文本内容，逻辑更直白。

两种方法都能实现你的需求，选哪种全看个人代码习惯~

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