大佬教程收集整理的这篇文章主要介绍了javascript – jQuery循环文本出现,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要能够遍历页面上给定文本的下一个出现.就像几乎每个软件上最常见的“查找”功能一样(F3 – 找到下一个).
我正在尝试使用jQuery,但无法通过任何方式使其工作.尝试:NextAll(),next(),最近()(似乎有bug),find(),eq(),children()等等,等等
Bellow是一个可以工作的示例,但它会转到页面的最后一个元素,而不是循环遍历.
function scrollMe(tow){ var targetOffset = $("*:contains('"+tow+"'):last").offset().top; $('html,body').animate({scrollTop: targetOffset},1000); }
为了清楚起见,我的页面中有一组带有文本的行(div).每次用户单击此行时,必须轻轻地向下(或向上)滚动到下一行,并显示文本(如果有).
样品:
<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>
实际上它应该被jQuery包围,但它只是为了说明.
由于您将使用变量作为包含的输入,我建议跳过选择器.它速度很快,但您将无法保持变量输入的清理.
例如,这将突出显示“两个”(fiddle example)的所有文本出现:
jQuery(function($) { var findText = 'two'; $('*').filter(function() { return $(this).children().length < 1 && $(this).text().indexOf(findText) >= 0; }).addClass('hilite'); });
要使用某种查找下一个功能的工作,您需要一个变量来跟踪当前索引,以及某种触发器:
jQuery(function($) { // stores the currently highlighted occurence var index = 0; var findText = 'sed'; // you Could do this inside the click as well,here,it's 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} ); }); });
以上是大佬教程为你收集整理的javascript – jQuery循环文本出现全部内容,希望文章能够帮你解决javascript – jQuery循环文本出现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。