Need help finding/traversing dom in Javascript

Question

I'm sure this is a redundant question, but I've looked for an hour or so and come up empty-handed so was hoping someone could help...

Looking for a way to use JS (not jquery) to return the class of the li below when searching for 'Chicken' (or whatever the value is).

<li class='113252'>
    <span>Chicken</span>
</li>

So was hoping the javascript would return the li class when given the span value (in this case Chicken).

Thanks!

Answer 1

Try this:

var spanArray = document.getElementsByTagName('span');

for (var i=0; i<spanArray.length; i++) {
    if(spanArray[i].innerHTML.toUpperCase() === 'CHICKEN')
    {
        alert(spanArray[i].parentNode.className);
        break;
    }
}

Now, I'm more familiar with jQuery but seems to work in the fiddle linked here: http://jsfiddle.net/FranWahl/fCzYc/2/ (Updated to include suggested break; after match)

You can add more type checking for the parentNode to ensure it is an li and so on, but this should get you started.

Also, I'm not sure at all how efficient this is in a big document.

Edit
Having read through some comments I have updated my code above to include the break as suggested by ajax333221 .

Dennis mentioned that it would be better to call getElementByTagName on the ul . Given you can have an li without a ul I added it here as separate code as I'm not sure if the OP has ul tags.

Code querying against each ul (jsFiddle here )

var ulArray = document.getElementsByTagName('ul');
var parentFound = false;

for (var i = 0; i < ulArray.length; i++) {
    var spanArray = ulArray[i].getElementsByTagName('span');

    for (var i = 0; i < spanArray.length; i++) {
        if (spanArray[i].innerHTML.toUpperCase() === 'CHICKEN') {
            alert(spanArray[i].parentNode.className);
            parentFound = true;
            break;
        }
    }

    if(parentFound)
    {
        break;
    }
}​

Answer 2

This is by no means fully complete, which is why you should seek a library, but it does two things:

1. recursively traverse child elements (starting with the document's BODY), to find the supplied text
2. recursively traverse the parent element to find the supplied parent element tag, once found it will return the class of that parent

JSFiddle: http://jsfiddle.net/vol7ron/bttQN/

function getParentClass(element, parentTag){
   if (element.tagName == parentTag.toUpperCase())
       return element.className;
   return getParentClass(element.parentNode,parentTag);
}

window.findParentClass = function (text,tagName){
    var elements = document.getElementsByTagName('body');
    for (var n=elements.length; n--;){
        var foundClass = (function searchNextChild(el){
            if (!el.children.length) {
                if (el.textContent == text) 
                   return getParentClass(el,tagName);
                return;
            }
            for (var i=0, n=el.children.length; i<n; i++)
               return searchNextChild(el.children[i]);
        })(elements[n]);

        return foundClass;
    }
};

Example Call:

alert( findParentClass('Chicken','li') );