0

I have multiple div elements, each includes one codemirror element. I want to get id of div on changing codemirror inside.

$(document).ready(function(){
    $(".code").each(function (i, editorEl) {
        CodeMirror.fromTextArea(editorEl, {
            lineNumbers: true,
            mode: "xml"
        }).on("change", function(editorEl) {
            //console.log(editorEl.getValue());// this row works all right
            console.log("HOW I GET THE PARENT ELEMENT ID HERE");
        });
    });
});
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>

<div id="poo"><textarea class="code" mode="text/html"></textarea></div>
<div id="foo"><textarea class="code" mode="text/html"></textarea></div>
<div id="boo"><textarea class="code" mode="text/html"></textarea></div>
<!-- ... -->
<div id="nnn"><textarea class="code" mode="text/html"></textarea></div>
Bakyto
  • 1
  • 1
  • If you don't shadow the `editorEl` variable, you can use `editorEl.parentNode.id` – Titus Jun 18 '22 at 09:59
  • Looks like you're using `jQuery`, so `$(editorEl).parent()` should give you the parent element. https://api.jquery.com/parent/ not tested – Michael Jun 18 '22 at 09:59
  • Thanks. Yes I use jquery because my real project is more complex. I've tried as you suggested but its not working too. I tried everything I knew, but editorEl does not turn into jquery object in any way. – Bakyto Jun 18 '22 at 10:45
  • Change `on("change", function(editorEl) { .. })` to something like `on("change", function(codeMirror) { .. })` and it will – Titus Jun 18 '22 at 11:00

1 Answers1

0

Thanks everyone. I solved this problem:

$(document).ready(function(){
    $(".code").each(function (i, editorEl) {
        CodeMirror.fromTextArea(editorEl, {
            lineNumbers: true,
            mode: "xml"
        }).on("change", function(editorEl) {
            var parent_id = $(editorEl.getTextArea()).parent().attr("id")
            console.log(parent_id);
        });
    });
});
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>

<div id="poo"><textarea class="code" mode="text/html"></textarea></div>
<div id="foo"><textarea class="code" mode="text/html"></textarea></div>
<div id="boo"><textarea class="code" mode="text/html"></textarea></div>
<!-- ... -->
<div id="nnn"><textarea class="code" mode="text/html"></textarea></div>
Bakyto
  • 1
  • 1