JQuery loop through text entries

Question

I need to be able to cycle through the next occurrence of a given text on a page. In the same way as the most common “find” function in almost every software (F3 - find further).

I'm trying to do this with jQuery, but I just can't get it to work. Tried: NextAll (), next (), closest () (which seems erroneous), find (), eq (), children (), etc. Etc. Etc.

Below is a sample that works, but it goes to the last element on the page and does not go in a circle.

function scrollMe(tow){ var targetOffset = $("*:contains('"+tow+"'):last").offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000); } 

To make it clear, on my page there is a set of lines (div) with text inside. Each time the user clicks on this line, he must carefully slide (or up) to the next line with the appearance of the text (if any).

Sample:

 <div onclick="scrollMe('hello');">hello</div> <div onclick="scrollMe('world');">world</div> <div onclick="scrollMe('foo');">foo</div> <div onclick="scrollMe('hello');">hello</div> <div onclick="scrollMe('bar');">bar</div> 

Indeed, it should be enclosed in jQuery, but this is for illustration only.

Answer 1

Here is a working example of scrolling to the next occurrence and highlighting it .

Since you are going to use a variable as containing input, I would recommend skipping the selector. This is fast, but you will have a problem saving the changed input.

This, for example, will highlight all textual entries of 'two' ( example script ):

 jQuery(function($) { var findText = 'two'; $('*').filter(function() { return $(this).children().length < 1 && $(this).text().indexOf(findText) >= 0; }).addClass('hilite'); }); 

To do this with some search function for the next function, you need a variable to keep track of the current index and some kind of trigger:

 jQuery(function($) { // stores the currently highlighted occurence var index = 0; var findText = 'sed'; // you could do this inside the click as well, here, it cached/faster // inside click, it would be more dynamic and prevent memory leaks // just depends on your needs // you would also want to start with a parent element as $('*') is costly! var $occurrences = $('*').filter(function() { return $(this).children().length < 1 && $(this).text().indexOf(findText) >= 0; }); // remove existing highlights, then find the next occurrence and highlight it $('#trigger').click(function() { if( index == $occurrences.length-1 ) { index = 0; } $occurrences.find('span.hilite').replaceWith(findText); var $next = $occurrences.eq(++index); $next.html( $next.html().replace(findText, '<span class="hilite">'+findText+'</span>') ); $(document).scrollTop($next.offset().top-35); return false; }); // scroll our trigger link when the screen moves so we can click it again $(window).scroll(function() { var top = $(window).scrollTop(); $('#trigger').offset( {top: top, left: 0} ); }); }); 

Answer 2

Ok, for this you have to use something to find the text in the table, and then scroll to that position.

Ive done jsfiddle to show you how to find the top position of a table cell that contains certain text HERE

This violin warns the top position of both the words "hello" in the order in which they appear. You can use break () to find only the first one.

You should accept this and implement your own program around it, using something like jQuery scrolltop () to scroll the screen to the next word.

Answer 3

 function ScrollMe(tow) { var id = 'scroll_counter_' + tow; var indexStr = 'index'; var $counter = $('#' + id); var animationLength = 1000; if ($counter.length == 0) { $counter = $('<div></div>').attr('id', id); $counter.appendTo('body'); $counter.data(indexStr, 0) } var index = $counter.data(indexStr) var $items = $("*:contains('"+tow+"')") var $item = $($items.get(index)) $counter.data(indexStr, (index + 1) % $items.length) $('html,body').animate({scrollTop: $item.offset().top}, animationLength); } 

Enjoy it.
Each call to ScrollMe () with the given string finds the next occurrence of the string.
If it is called with different lines, the results will not reset (although they can be easily accessed).
The code needs to be slightly modified to support strings containing non-alphanumeric characters.
I am sure that you will be smart enough to learn how to highlight / change the color of the selected item.

Answer 4

I don't know if this is exactly what you need, but it should be the starting point:

http://jsfiddle.net/massivepenguin/pnu37/18/

I added a search form so you can find specific words ...