Prototype.js - $(...).next is not a function

Question

I try to convert my code from jQuery to prototype.js. I execute the following code, but get $(...).next is not a function

var editorCounter = 0;
var newEditorIds = [];

$$(".input-text.mceEditor").each(function() {
    var next = $(this).next();
    var tagName = next.prop("tagName");

    if (typeof(tagName) == "undefined") {
        var newId = "newEditor_" + editorCounter;
        $(this).attr("id", newId);
        newEditorIds.push(newId);
        editorCounter++;
    }
});

newEditorIds.each(function(name, index) {
    tinymce.EditorManager.execCommand('mceAddEditor', true, name);
});

It is not fully converted to prototype.js. I still have to figure out the equivalents for prop() and attr(). I don't understand what I did wrong so far though, since I informed myself on this site and it should work.

---

Original working jQuery Code:

var editorCounter = 0;
var newEditorIds = [];

jQuery(".input-text.mceEditor").each(function() {
    var next = jQuery(this).next();
    var tagName = next.prop("tagName");

    if (typeof(tagName) == "undefined") {
        var newId = "newEditor_" + editorCounter;
        jQuery(this).attr("id", newId);
        newEditorIds.push(newId);
        editorCounter++;
    }
});

jQuery.each(newEditorIds, function(i, v) {
    tinymce.EditorManager.execCommand('mceAddEditor', true, v);
});

Answer 1

Array.prototype.each that you are using does not set this. You are supposed to provide an argument in the callback function to receive the element. Thus:

$$(".input-text.mceEditor").each(function(element) {
    var next = element.next();

(You may use $(element), but it doesn't do anything except when you don't know whether element is an ID or an Element. Prototype uses monkey-patching, not wrapping, so you can use a bare Element directly.)

---

Converted code:

var editorCounter = 0;
var newEditorIds = [];

$$(".input-text.mceEditor").each(function(element) {
    var next = element.next();

    if (typeof(next) == "undefined") {
        var newId = "newEditor_" + editorCounter;
        element.id = newId;
        newEditorIds.push(newId);
        editorCounter++;
    }
});

newEditorIds.each(function(name, index) {
    tinymce.EditorManager.execCommand('mceAddEditor', true, name);
});