Find next DOM Object that exists in an Array

Question

So, I have created an array of all instances of certain classes.

anchors = [];

$('.a-all').each(function() {
    anchors.push($(this));
});

if ( viewport().width > 1366 ) {
    sub_anchors = $('.a-lg');
} else if ( viewport().width > 1024 ) {
    sub_anchors = $('.a-md');
} else if ( viewport().width > 768 ) {
    sub_anchors = $('.a-sm');
} else {
    sub_anchors = $('.a-xs');
}

sub_anchors.each(function() {
    anchors.push($(this));
});

Then I set a variable 'current' and made it the object with the class '.active'.

 current = $('.active');

Now, with jQuery, I want to be able to find the next and previous DOM object relative to .active that exists inside the array I have created.

The array is not in order, and will change at different widths.

Is this possible, or is there a better logic to use here?

EDIT: Adding markup for context.

<div class="website-wrapper w-d-100 h-d-100">

    <div class="page-wrapper">

        <section id="landing-slider" class="a-all active">
            <div class="w-d-100 h-d-100">
                This is the homepage landing slider... thing.
            </div>
        </section>

        <section id="about" class="a-all">
            <div class="w-d-100 h-d-50 w-sm-75 h-sm-100 dark">
                About Panel 1 (75)
            </div>
            <div class="w-d-100 h-d-50 w-sm-25 h-sm-100">
                About Panel 2 (25)
            </div>
        </section>

        <section id="clients" class="a-all">
            <div class="w-d-100 h-d-50 w-sm-50 h-sm-100">
                Clients Panel 1 (50)
            </div>
            <div class="w-d-100 h-d-50 w-sm-50 h-sm-100 dark">
                Clients Panel 2 (50)
            </div>
        </section>

        <section id="services" class="a-md">
            <section class="a-sm">
                <div class="w-d-100 h-d-100 w-sm-50 h-sm-100 dark">
                    Services Panel 1 (50)
                </div>
            </section>
            <section class="a-sm">
                <div class="w-d-100 h-d-100 w-sm-50 h-sm-100">
                    Services Panel 2 (50)
                </div>
            </section>
        </section>

        <section id="lets-work" class="a-all">
            <div class="w-d-100 h-d-100 dark">
                Lets work together! (100)
            </div>
        </section>

    </div>

</div>

What is your HTML structure? I'm sure it's possible to do this without building arrays from jQuery objects — Rory McCrossan
– Rory McCrossan, Commented Oct 4, 2017 at 9:19
Is there a reason you are making an array of $('.a-all') when that in itself is basically an array like object. Note you can use add() to add more elements to the collection — Patrick Evans
– Patrick Evans, Commented Oct 4, 2017 at 9:20
@T.J.Crowder I had the same thought - my guess is that the elements the OP is selecting are not all in the same element and/or at the same level of that element. — Rory McCrossan
– Rory McCrossan, Commented Oct 4, 2017 at 9:20
Have added HTML. The array is a collection of elements I want to scroll to and from. The array is not in order, though, so I can't just scroll to the next/prev array entry, as it likely wont be the next/prev object on the page. — KillahB
– KillahB, Commented Oct 4, 2017 at 9:28

T.J. Crowder · Accepted Answer · 2017-10-04 09:35:57Z

1

Updated answer (now you've shown your HTML)

Since your .a-all elements are siblings (sometimes non-adjacent), you can use prevAll and nextAll, no need for the anchors array at all:

var next = $(".active")..nextAll(".a-all").first();
// or
var previous = $(".active").prevAll(".a-all").first();

If you want to find a .a-md or .a-sm, just use that as the prevAll/nextAll selector.

Original answer

Now, with jQuery, I want to be able to find the next and previous DOM object relative to .active that exists inside the array I have created.

It would be easier if you didn't make an array out of your initial jQuery object. Instead, just remember the object:

var anchors = $(".a-all");

Later, if you want to know where an element is in that array, you can use index(element):

var index = anchors.index($(".active")[0]);

Then you can get the previous like this:

var prev = index > 0 ? anchors.eq(index - 1) : $();

...or the next like this:

var next = index < anchors.length - 1 ? anchors.eq(index + 1) : $();

But if you want to use an array of jQuery instances (like the one you built) instead, you can use findIndex:

var anchors = $(".a-all").map(function() { return $(this); }).get();
// ...
var active = $(".active")[0]; // Note the [0] to get raw element
var index = anchors.findIndex(function(entry) {
    return entry[0] === active;
});
// ...
var prev = index > 0 ? anchors[index - 1] : $();
// ...
var next = index < anchors.length - 1 ? anchors[index + 1] : $();

edited Oct 4, 2017 at 9:35

answered Oct 4, 2017 at 9:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

8 Comments

KillahB Over a year ago

There are other classes I would like to find at certain widths, ie. 'a-md', and 'a-sm'.

T.J. Crowder Over a year ago

@KillahB: See update at the top of the answer, if you want to use those instead, just use them in prevAll or nextAll.

KillahB Over a year ago

Sorry, there will be elements with different classes that will need to be navigated between. So, I don't think I can use class selectors to find the elements.

T.J. Crowder Over a year ago

@KillahB: I have no idea what you mean by that. Can you explain?

KillahB Over a year ago

Sometimes my array will look like this [ .a-all, .a-all, .a-all, .a-all ], sometimes it will look like this [ .a-all, .a-all, .a-all, .a-sm, .a-sm ], and there could be other variations. I want to be able to navigate (in order) to all of these objects. Not in the order of the array, but in the order they appear in the dom.

|

Collectives™ on Stack Overflow

Find next DOM Object that exists in an Array

1 Answer 1

Updated answer (now you've shown your HTML)

Original answer

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Updated answer (now you've shown your HTML)

Original answer

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related