Question

I have an iframe and by clicking on any of its content , css class is applied on it (say “selected”). After that

when next button is clicked, it should apply this class on next element that contains text

and return the text. Traversing should be text node based. Though i did tried to do something very ugly but i guess there must some simple solution available.

Here is my code:

$(function(){
$('#next').click(function(){
    var current_segment =$('#my_iframe').contents().find(".highlight");

    // if current segment has children
    if($(current_segment).children().not('.traversed_already').length > 0){
        $(current_segment).children().not('.traversed_already').first().addClass('highlight');
        $(current_segment).removeClass('highlight');

        // add class to stop repitative traversing
        $(current_segment).addClass('traversed_already');
    //                                                return false;

    // if has siblings and no children
    }else if($(current_segment).siblings().not('.traversed_already').length > 0 
        && $(current_segment).children().not('.traversed_already').length <= 0){
        $(current_segment).siblings().not('.traversed_already').first().addClass('highlight');
        $(current_segment).removeClass('highlight');

        // add class to stop repitative traversing
        $(current_segment).addClass('traversed_already'); 
    //                                                return false;

    // if no siblings and no children
    }else if($(current_segment).siblings().not('.traversed_already').length == 0 && 
        $(current_segment).children().not('.traversed_already').length == 0){

        // check the very first parent if traversed check its siblings
        var parent_segment = $(current_segment).parent().first();

        // if parent is already traversed already
        if($(parent_segment).hasClass('traversed_already')){

            // if parent is traversed but parent has sibling that is untraversed
            if($(parent_segment).siblings().not('.traversed_already').length > 0){
                $(parent_segment).siblings().not('.traversed_already').first().addClass('highlight');
                $(parent_segment).removeClass('highlight');

                // add class to stop repitative traversing
                $(parent_segment).addClass('traversed_already');
            //                                                        return false;
            // if no untraversed sibling then search for parent(s)
            }else{
                // Look for the parent in Dom tree which is not traversed
                $(parent_segment).parents().not('.traversed_already').first().addClass('highlight');
                $(parent_segment).removeClass('highlight');

                // add class to stop repitative traversing
                $(parent_segment).addClass('traversed_already');
            //                                                        return false;
            } // end of if traversed parent has siblings(untraversed).

        // if parent is not traversed
        } else {
            $(parent_segment).addClass('highlight');
            $(current_segment).removeClass('highlight');

            // add class to stop repitative traversing
            $(current_segment).addClass('traversed_already');
        } // end of if parent is already traversed or not

    //                                                return false;
    } // end of else if no siblings and no parents

Problem with this Code is:

It just traverse the next element by seeing the child first and then siblings and then parents siblings but it fails when there comes parents > parents > parents siblings.

Note : i believe this can be done through DOM traversing very easily but i am not able to hit the right solution.

Answer 1

The simplest solution was the DOM TreeWalker, my luck that it took me too long to figure that out.

Here is the link to it. Hope it will help someone facing the same problem and instead of speding hours or days it will help them right away.