【问题标题】:Jquery select next classjQuery选择下一个类
【发布时间】:2023-03-19 02:18:01
【问题描述】:

我想要做的是将页面中的查找功能添加到我正在处理的网页中。我正在使用Highlight plugin 突出显示搜索词。您可以在this fiddle 上查看基本演示版本。

Highlight 插件添加了一个带有“highlight”类的 span。当您反复按“查找”按钮时,我想滚动到每个“突出显示”类。最好和最简单的方法是什么?我尝试了 next() 但无法正常工作。

function findText(str){
        searchTerm = str;
        $(".col-xs-8").unhighlight();
        $(".col-xs-8").highlight(str);
        $('html, body').animate({
            scrollTop: $(".highlight").offset().top
        }, 100);
      }

【问题讨论】:

    标签: javascript jquery html scroll


    【解决方案1】:

    检查this小提琴。

    我已经添加了以下代码,并且我也对 CSS 进行了一些更改。这解决了你的问题吗?

     function findText(str){          
        searchTerm = str;
        $(".col-xs-8").unhighlight();
        $(".col-xs-8").highlight(str);
        $('html, body').animate({
            scrollTop: $(".highlight").eq($('.hide').val()).offset().top
        }, 100);          
          $('.hide').val(parseInt($('.hide').val())+1);
      }
    

    【讨论】:

    • 我注意到,当您搜索某些内容然后搜索另一个单词时,.hide 类值不会重置,因此它会打乱后续搜索的滚动。我对 js 做了一点改动,你可以在这里看到:jsfiddle.net/o13vongn/2 有没有更简单/有效的方法来做到这一点?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-10
    • 2010-12-16
    • 1970-01-01
    • 2012-07-18
    • 1970-01-01
    相关资源
    最近更新 更多