Home/ Questions/Q 6598339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:20:02+00:00

I have some JQuery code that converts all HTML elements of a specific class

  • 0

I have some JQuery code that converts all HTML elements of a specific class to & from textarea elements.

My Problem: I use JQuery(.addClass()) to change an elements class from “updatable” to “updatable P”. But when I go to search for all the elements that have the class “updatable” (using the function $(“.updatable”).each()) it does’nt find any elements when it should find 3.

What am I doing wrong to make this happen? It seems that after I change an elements classI am unable to identify/find that element by its class(using JQuery) again.

<html>
<head>

    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">
    <!--
        var STATE = 1;

        function Toggle()
        {
            if (STATE==1) { convertToUpdatable(); STATE = 0; }
            else          { convertToStatic();    STATE = 1; }
        }

        function getTitleName( ele )
        {
            try        { return ele.className.split(" ")[1]; }
            catch (ex) { return "undefined"; }
        }

        function convertToUpdatable()
        {
            // Post: Convert all HTML elements (with the class 'updatable') to textarea HTML elements
            //       and store their HTML element type in the class attribute
            // EG: Before: <p class="updatable Paragraph1"/> Hello this is some text 1 </p>
            //     After : <p class='updatableElementTitle'>Paragraph1</p><textarea class="updatable Paragraph1 p"/> Hello this is some text 1 </textarea>

            $(".updatable").each(function()
                {
                    var title = getTitleName( this );
                    $(this).replaceWith("<p class='updatableElementTitle'>"+title+"</p><textarea>"+$(this).text() +"</textarea>");
                    $(this).addClass( this.nodeName );
                    alert( this.className );
                });
        }

        function convertToStatic()
        {
            // Post: Find all HTML elements (with the class 'updatable'), check to see if they are part of another class aswell
            //       (which will be their original HTML element type) & convert the element back to that original HTML element type

            // PROBLEM OCCURS HERE: after I have changed an elements className in the convertToUpdatable() I can no
            //                      longer find any HTML elements that have the className updatable using $(".updatable").each()
            $(".updatable").each(function()
                {
                    alert("Loop");
                    // Determine elements original HTML(node) type
                    try
                    {
                        var type = this.className.split(" ");
                        type     = (type[ type.length-1 ]).toLowerCase();
                        alert(type);
                    }
                    catch (ex) { alert("Updatable element had no type defined in class attribute"); return; }

                    // Convert element back to original HTML type
                    $(this).replaceWith( type +$(this).text() + type );

                    // Remove elements type from its className (remove " P" from "updatable Paragraph1 P")
                    $(this).removeClass( type ); 
                    alert( this.className );
                });

            // Delete all elements with the class 'updatableElementTitle'
            $(".updatableElementTitle").remove();
        }

    -->
    </script>
</head>
<body>

    <p class="updatable Paragraph1"/> Hello this is some text 1 </p>
    <b class="updatable Paragraph2"/> Hello this is some text 2 </b>
    <i class="updatable Paragraph3"/> Hello this is some text 3 </i>

    <input id="MyButton" type="button" value="Click me!" onclick="Toggle();" />

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .replaceWith() destroys the existing element. Thus, you can no longer use this after you’ve done the replaceWith() in the loop because that DOM element is no longer the element that’s in your document (it’s the old one that has been removed and will be garbage collected as soon as your function exits).

    Since you’re specifying the HTML for the new tag, I would suggest you just put the new class name in the HTML you pass to replaceWith(). Further, the alert you have to check the className is checking the old DOM element, not the new DOM element. Remember, this points to the old DOM name, not the one you replaced it with.

    You could do so by changing this:

            $(".updatable").each(function()
            {
                var title = getTitleName( this );
                $(this).replaceWith("<p class='updatableElementTitle'>"+title+"</p><textarea>"+$(this).text() +"</textarea>");
                $(this).addClass( this.nodeName );
                alert( this.className );
            });
    }

    to this:

            $(".updatable").each(function()
            {
                var title = getTitleName( this );
                $(this).replaceWith("<p class='updatableElementTitle " + this.nodeName + "'>" + title + "</p><textarea>"+$(this).text() +"</textarea>");
            });
    }

    Although, I don’t understand why you’re adding the nodeName as a class?

    • 0