What am I missing? (jQuery DOM traversal)

[Geates]

I'm trying to traverse a DOM object. Furthermore, this DOM object is the result of $.parseHTML(). My code makes sense but it's not working so I must not be considering something. Any help would be greatly appreciated?

var str = "<div id='one'><div id='header'><b>hello</b></div><img src='a.gif'></div>";

var strElements = "";
var objDOM = $.parseHTML(str);

function traverseDOM(objDOM) {
    $.each(objDOM, function (i, element) {
        if (element.children().length > 0)
            strElements += traverseDOM(element);
        else
            strElements += 'index: ' + i + ' - ' + 'node: ' + element.nodeName + '<br>';
    });

    return strElements;
}

alert(traverseDOM(objDOM));

-Geates

http://ns7.webmasters.com/caspdoc/html/vbscript_language_reference.htm

 

[vacunita]

If I run your code, I get an error.

Error: TypeError: element.children is not a function

That is children is a property, and so does not require parenthesis.


I suggest checking the error console. Firefox has a pretty good ne, and it will tell you if your JS has any issues.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Geates]

I was not representing (selecting) the elements correctly

var str = "<div id='one'><div id='header'><b id='bold'>hello</b></div><img id='image' src='a.gif'></div>";
var objDOM = $.parseHTML(str);

var strElements = "";

function traverseDOM(obj) {
    $.each(obj, function (i, element) {
        strElements += 'node: ' + element.nodeName + ' ' + element.id + '\n';    
        if ($(element).children().length > 0) {
            strElements = traverseDOM($(element).children());
        }
    });

    return strElements;
}

alert(traverseDOM(objDOM));

-Geates

http://ns7.webmasters.com/caspdoc/html/vbscript_language_reference.htm