How to get next text element of iframe on click each time?
<p>I have an iframe and by clicking on any of its content , css class is applied on it (say "selected"). After that </p>

<p><strong>when next button is clicked, it should apply this class on next element that contains text</strong></p>

<p>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.</p>

<p>Here is my code:</p>

<pre><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 &gt; 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 &gt; 0 
        &amp;&amp; $(current_segment).children().not('.traversed_already').length &lt;= 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 &amp;&amp; 
        $(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 &gt; 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
</code></pre>

<p>Problem with this Code is:</p>

<p>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.</p>

<p><em><strong>Note : i believe this can be done through DOM traversing very easily but i am not able to hit the right solution.</em></strong></p>
