如何遍历所有textarea标签并在其后添加节点？

Question

我不是一个jquery开发人员，我也不是一个javascript开发人员。我正在尝试快速破解让我的生活变得简单。这是页面：

我想要完成的是：

1. 我想在页面上的每个div元素后添加textarea mathjax_preview类。
2. 该div的inner.HTML必须是相应textarea
内的文字

但它似乎不起作用。

我在js/1.js中有以下javascript代码，并在页面加载时加载：

var preview_number = 0;
$("textarea").each(function() { 
    var d = $(this).next();
    if (!d.hasClass("mathjax_preview")) {
      preview_number++;
      var d = $("<div class='mathjax_preview' " +
         "style='padding: 5px; color: black; background: #eee; border: 1px solid #888;float:left;'" +
         "></div>");
      d.attr("id", "mathjax_preview_" + preview_number);
      d.insertAfter(this);
    } 
    d.text($(this).val());
    MathJax.Hub.Queue([ "Typeset", MathJax.Hub, d.attr("id") ]);
});

修改

我刚刚在上面文件的开头插入了以下代码段：

var preview_number = 0;
var elements = document.getElementsByTagName("textarea");
  alert(elements.length);

警报0。怎么会？

Answer 1

尝试以下方法（我没有对此进行测试，因为它直接脱离了我的脑海）：

$(document).ready(function() {
    var preview_number = 0;

    $("textarea").each(function() { 
        preview_number++;

        var d = document.createElement("div");
        $(d).attr("id", "mathjax_preview_" + preview_number);
        $(d).addClass("mathjax_preview");
        $(d).css("padding", "5px");
        $(d).css("color", "black");
        $(d).css("background", "#eee");
        $(d).css("border", "1px solid #888");
        $(d).css("float", "left");
        $(d).html($(this).val());

        MathJax.Hub.Queue([ "Typeset", MathJax.Hub, $(d).attr("id") ]);

        $(this).append(d);
    });
});

Answer 2

变量textarea不存在。请改用this：

d.insertAfter(this);

Answer 3

您没有定义textarea变量。

d.insertAfter(textarea);

我相信你可以使用$(this)参考。

d.insertAfter($(this));

Answer 4

textarea中的d.insertAfter(textarea);是什么？

似乎是d.insertAfter($(this));。

Answer 5

警告消息显示为零，因为您没有将javascript文件放在页面末尾，也没有使用就绪回调。 要使用就绪回调，请按以下步骤添加代码

$（document）.ready（function（）{/ *在这里添加你的javascript代码* /}）;