www.webdeveloper.com
Results 1 to 5 of 5

Thread: Problem Nesting elements with same class name

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    3

    Problem Nesting elements with same class name

    When the code below is loaded into a browser, the DOM gets built incorrectly. Specifically, the final }); text node does not appear inside the code element it belongs to, but rather as a sibling within the p element. I can fix it by simply changing the class name of the innermost code elements from "new" to "new2", or by removing them altogether. This indicates to me that there must be some kind of limit on nesting tags of the same class, but I can`t find a reference to this phenomenon anywhere else.

    Can anyone out there shed any light on this?

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <style type="text/css">
                code.first {
                    margin-left:20px;
                    margin-top:10pt;
                    margin-bottom:10pt;
                    font-size: inherit;
                    display:block;
                }
                code.new {
                    margin-left:30px;
                    display:block;
                }
            </style>
        </head>
        <body>
            <p>The JavaScript code below is from the |ajaxTime.html| example.  Take a moment to read it over and try to understand it.
                <code class='first'>
                    $(document).ready( function() {
                    <code class='new'>
                        var launchAjax = function() {
                        <code class='new'>
                            $.get(
                            <code class='new'>
                                "servers/timeServer.php", 
                                <br>{ 
                                <code class="new">
                                    timezone: $("[name=timezone]").val(), 
                                    <br>request: $("[name=type]").val(), 
                                    <br>delay: $("[name=delay]").val(), 
                                </code>
                                },
                                <br>function(data, textStatus, jqXHR) {
                                <code class="new">
                                    $("#result").html(data);
                                </code>
                                };
                            </code>
                            )};
                        </code>
                        $("#ajaxButton").click(launchAjax);
                    </code>
                    }); 
                </code>
            </p>
        </body>
    </html>

  2. #2
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    It appears you are setting your divs and ending them all at the end of the page so they are divs with in divs. if one of them is supersceding a parent div class this could be because its choosing to default to one loaded to the DOM first. go in to the class which is not getting rendered properly and add !important to the specific attribute of the div that is not functioning properly and see if that helps. something like this

    p { color: #ff0000 !important; }

    Sorry if that does not help maybe I am misunderstanding your problem.

    Also if the point of these divs is to render each link in to the same div could you not close each section off and start the next one so they are not all children of the first?

  3. #3
    Join Date
    Jun 2013
    Posts
    3
    Hi Nicholas,

    Thanks for the response, but I don't think you are understanding the problem. The problem is not that style properties are not being applied. The problem is that the DOM tree is not being created in the browser properly. The final text node with contents "});" should be a child of the first <code> element, but it is not. Rather it appears as a child of the <p> element and a sibling of the <code> element. This can be fixed simply by changing the class of the innermost <code> elements to something other than "new". This happens on both firefox and chrome (haven't checked other browsers).

    This does not happen with <div> elements, which behave as you would expect.

    This behavior seems odd to me, and wrong, so I'm asking for any info that would shed some light on why this is happening.

    Thanks,
    Sam.

    Quote Originally Posted by Nicholas Diaz View Post
    It appears you are setting your divs and ending them all at the end of the page so they are divs with in divs. if one of them is supersceding a parent div class this could be because its choosing to default to one loaded to the DOM first. go in to the class which is not getting rendered properly and add !important to the specific attribute of the div that is not functioning properly and see if that helps. something like this

    p { color: #ff0000 !important; }

    Sorry if that does not help maybe I am misunderstanding your problem.

    Also if the point of these divs is to render each link in to the same div could you not close each section off and start the next one so they are not all children of the first?

  4. #4
    Join Date
    Jun 2013
    Posts
    3
    Update: Opera, Firefox, Internet Explorer, and Chrome get it wrong. Safari gets it right. To see the difference, try the code below. The alert box says "undefined" on all browsers except Safary, which reports "});", which I believe is the correct answer.

    Code:
    <!--
    To change this template, choose Tools | Templates
    and open the template in the editor.
    -->
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <style type="text/css">
                code.first {
                    margin-left:20px;
                    margin-top:10pt;
                    margin-bottom:10pt;
                    font-size: inherit;
                    display:block;
                }
                code.new {
                    margin-left:30px;
                    display:block;
                }
            </style>
        </head>
        <body>
            <p>The JavaScript code below is from the |ajaxTime.html| example.  Take a moment to read it over and try to understand it.
                <code class='first'>
                    $(document).ready( function() {
                    <code class='new'>
                        var launchAjax = function() {
                        <code class='new'>
                            $.get(
                            <code class='new'>
                                "servers/timeServer.php", 
                                <br>{ 
                                <code class='new'>
                                    timezone: $("[name=timezone]").val(), 
                                    <br>request: $("[name=type]").val(), 
                                    <br>delay: $("[name=delay]").val(), 
                                </code>
                                },
                                <br>function(data, textStatus, jqXHR) {
                                <code class='new'>
                                    $("#result").html(data);
                                </code>
                                };
                            </code>
                            )};
                        </code>
                        $("#ajaxButton").click(launchAjax);
                    </code>
                    }); 
                </code>
            </p>
    		<script type="text/javascript">
    			alert(document.querySelector(".first").lastChild.data);
    		</script>
        </body>
    </html>

  5. #5
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    ahhh I am sorry for misunderstanding. and the worst thing is I have built two sites using ajax and I was very displeased with my self on both of them. I gather since you have found a fix for this problem you just want to understand why its behaving the way it is. You have my curiosity as well. I hope someone comes along with an answer because this is my weakest area and I really need to learn more about it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles