javascript - jQuery 滚动到真正困惑的内容上突出显示的元素，需要帮助

Question

好吧，很久以前，我在突出显示插件的帮助下制作了一个jquery脚本，它使您能够在输入中输入一个术语，该术语在文本中突出显示，然后您可以滚动，单击下一个或上一个按钮，从一个突出显示的跨度元素到另一个。

这真的很酷，您可以尝试点击此链接上的按钮来玩:http://jsfiddle.net/m6ZMp/

现在我需要在一些困惑的 html 代码上使用这个 highlight/scroll 脚本，我将其与上一个示例中的文本放置在同一演示容器中。搜索词的突出显示没有问题，但我在单击 prev 和 next 按钮时遇到错误。这是因为我使用它们从一个突出显示的单词滚动到另一个单词，如下所示:

count = 0;
$('#next1').click(function (e) {
    var max_length = $('.highlight1').length;
        if (count < max_length) {
            count++;
        } else {
            count = 1;
        }
        e.preventDefault();
        scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
    });

    $('#prev1').click(function (e) {
    var max_length = $('.highlight1').length;
        if (count > 1) {
            count--;
        } else {
            count = max_length;
        }
        e.preventDefault();
        scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
    })

我有一个计数，用于获取找到的元素的数量，然后在每个点击函数的末尾，我将 int 传递给 scrollToElement 函数作为选择器 的一部分'.highlight1:nth-child(' + count + ')'。现在我假设我遇到了问题，因为在那些困惑的文档中，突出显示的术语不再处于同一级别，它们不是同一元素的同级或子元素，因此我的功能无法正常工作。

它在 scrollToElement 函数上给了我错误:

Uncaught TypeError: Cannot read property 'top' of null

您可以在此处查看、测试和编辑情况:http://jsfiddle.net/9EDSp/

整个脚本如下所示:

$(function () {
    $('#field1').bind('keyup change', function (ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('#demo-container').removeHighlight('span.highlight1');

        // disable highlighting if empty
        if (searchTerm) {
            var terms = searchTerm.split(/\s+/);
            $.each(terms, function (_, term) {
                // highlight the new term
                term = term.trim();
                if (term != "") $('#demo-container').highlight(term, 'highlight1');
            });

        }
    }).triggerHandler('change');

});

    /**  scroll to element function **/

    function scrollToElement(selector, time, verticalOffset) {
        time = typeof (time) != 'undefined' ? time : 500;
        verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
        element = $(selector);
        offset = element.offset();
        offsetTop = offset.top + verticalOffset + $('#demo-container').scrollTop();
        $('#demo-container').animate({
            scrollTop: offsetTop
        }, time);
    }

    /**document ready**/
    $(document).ready(function () {
        count = 0;
        /* scroll to 150px before .highlight with animation time of 400ms */
        $('#next1').click(function (e) {
        var max_length = $('.highlight1').length;
            if (count < max_length) {
                count++;
            } else {
                count = 1;
            }
            e.preventDefault();
            scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
        });

        $('#prev1').click(function (e) {
        var max_length = $('.highlight1').length;
            if (count > 1) {
                count--;
            } else {
                count = max_length;
            }
            e.preventDefault();
            scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
        })
    });

我是否只需要使用不同的选择器从一个术语滚动到另一个术语，或者只是需要比当前代码更多的内容？

欢迎任何意见、建议或帮助......

Answer 1

尝试使用$.each()循环选择所有highlight1元素，并将每个元素添加到一个数组中。使用当前计数作为索引，并为需要移动到的元素选择正确的索引。然后滚动到该元素。因此，传递一个 jQuery 对象/元素而不是选择器，并将 ScrollToElement 函数中的元素映射到您传递的对象，而不是您传递的选择器。使用 nth-child 选择该父级的 (n) 个 CHILD 元素，而不是 $('.highlight1') 返回的列表中的 (N) 项。

或者，您可以使用 .index() 来选择您所在索引/计数处的highlight1 元素。但请记住，指数将比您的计数少一位。基于数组!

希望我的解释是有意义的。