Question

我写了一个突出显示的搜索，将.highlight类添加到我键入的关键字中，然后我尝试编写一段代码，以滚动查看所有具有.highlight类的元素。之所以可以使用代码，是因为它可以找到所有带有.highlight元素的内容，但只能滚动到第一个元素。

这是我的功能：

$(document).ready(function(){
        $("#next").click(function () {
            var next = $(this).parent().nextAll().find(".highlight");
            $("html, body").animate({scrollTop: next.ofsset().top}, 500);

    });
});

Answer 1

这是一种方法。基本上跟踪当前项目并使用该库来查找下一个项目：

$(document).ready(function(){
    var current = "";
    $("#next").click(function () {
       if (current == "") {
         current = $(".highlight");
       }
        $("html, body").animate({scrollTop: current.offset().top}, 500);
        current = current.nextAll(".highlight");
        //If this is the last item you can reset or disable the click functionality
        if (current.length == 0) {
          $( "#next" ).prop( "disabled", true );//disable button
          // -OR-
          current = $(".highlight"); //reset button

        }
    });
});

如果您想从头开始，这也将允许您重置电流。

或者，您可以使用类来跟踪当前项目。这样做的好处是易于重新启动，并允许您向当前项目添加某种格式：

$(document).ready(function(){
    $("#next").click(function () {

       var currentHighlight;
       if ($(".current-highlight").length == 0) {
         currentHighlight = $(".highlight").first().addClass("current-highlight");
       }
       else {
          currentHighlight = $(".current-highlight").nextAll(".highlight");
          //Either exit or restart on the last item
          if (currentHighlight.length == 0 ) {
            $( "#next" ).prop( "disabled", true );//disable button
            // -OR-
            currentHighlight = $(".highlight"); //reset button
          }
          $(".current-highlight").removeClass("current-highlight");
          currentHighlight.addClass("current-highlight");
       }

        $("html, body").animate({scrollTop: currentHighlight.offset().top}, 500);

    });
});

jQuery滚动到下一个非兄弟无法正常工作

1 个答案: