Question

所以，我创建了一个包含某些类的所有实例的数组。

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));
});

然后我设置一个变量'current'并使其成为'.active'类的对象。

 current = $('.active');

现在，使用jQuery，我希望能够找到相对于.active存在于我创建的数组中的下一个和之前的DOM对象。

数组不按顺序排列，并会以不同的宽度变化。

这是可能的，还是有更好的逻辑在这里使用？

编辑：为上下文添加标记。

<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>

Answer 1

更新了答案（现在您已经显示了您的HTML）

由于您的.a-all元素是兄弟（有时不相邻），您可以使用prevAll和nextAll，根本不需要anchors数组：

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

如果您想找到.a-md或.a-sm，只需将其用作prevAll / nextAll选择器。

原始答案

现在，使用jQuery，我希望能够找到相对于我创建的数组中存在的.active的下一个和前一个DOM对象。

如果您没有从初始jQuery对象中创建数组，那将会更容易。相反，只需记住对象：

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

稍后，如果您想知道元素在该数组中的位置，可以使用index(element)：

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

然后你可以像这样得到上一个：

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

......或者下一个像这样：

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

但是如果你想使用jQuery实例数组（比如你构建的实例），你可以使用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] : $();

查找数组中存在的下一个DOM对象

1 个答案:

更新了答案（现在您已经显示了您的HTML）

原始答案