Scroll to next element in array jquery

Question

Introduction

I´m implementing a search engine similar to Ctrl+F from any browser, basically when i click the button next the browser has to scroll to next element with class named highlight.

I already have this method.

 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;
            $('html, body').animate({
                scrollTop: offsetTop
            }, time);
        }

this:

var highlights = $('.highlight');

Returns me the following array,

I need to find a way to scroll to desired span in array, inside each span element there is something like this.

  accessKey: ""
attributes: NamedNodeMap
baseURI: "http://localhost:51939/FBDefault.aspx"
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList[1]
className: "highlight"
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "al"
innerText: "al"
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: null
localName: "span"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: span.caret
nextSibling: text
nodeName: "SPAN"
nodeType: 1
nodeValue: null
offsetHeight: 19
offsetLeft: 43
offsetParent: a.dropdown-toggle
offsetTop: 15
offsetWidth: 13
outerHTML: "<span class="highlight">al</span>"
outerText: "al"
ownerDocument: document
parentElement: a.dropdown-toggle
parentNode: a.dropdown-toggle
prefix: null
previousElementSibling: i.fa.fa-calculator.margen
previousSibling: text
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
shadowRoot: null
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "SPAN"
textContent: "al"
title: ""
translate: true
webkitdropzone: ""
__proto__: HTMLSpanElement

pingul · Accepted Answer · 2015-07-27 14:02:15Z

1

To get the the n:th element from the jQuery search you can use .get(), so with what you have you should be able to use

var span = $(".highlight").get(spanIndex);
scrollToElement(span, time, verticalOffset);

and you could keep track of the current span in the selection with some variable.

answered Jul 27, 2015 at 14:02

pingul

3,4813 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awesome · Accepted Answer · 2015-07-27 13:53:20Z

Something like:

function scrollToElement($element, time, verticalOffset) {
            time = time || 500;
            verticalOffset = verticalOffset || 0;
            offset = $element.offset();
            offsetTop = offset.top + verticalOffset;
            $("html, body").animate({
                scrollTop: offsetTop
            }, time);
        };


var Search = function(selector){
     this.collection = $(selector);
     this.position = 0;
     this.next = function(){
        if(this.collection.length){
            if(this.collection.eq(this.position).length){
                scrollToElement (this.collection.eq(this.position));
                this.position += 1;
            }else if(this.position !== 0){
                this.position = 0;
                scrollToElement (this.position);
            }
        }else{
            alert('Nothing found!');
        }
     };
}
var mySearch = new Search('.highlight');

$(button).on('click', mySearch.next());

Collectives™ on Stack Overflow

Scroll to next element in array jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related