jquery - jQuery一个接一个地选择一个元素

Question

我的网页上有一个砌体元素，我想选择砌体前后的所有可聚焦元素。我的页面可能会随着时间而改变，在砌体元素之前和之后会有额外的焦点元素。

下面是代码结构的概述

<a class="skip-to-main-content">skip</a>
<a>text</a>
<a>text</a>

<div class="masonry">
   <div class="masonry-col"></div>
   <div class="masonry-col"></div>
   <div class="masonry-col"></div>
</div>
<div class="masonry">
   <div class="masonry-col"></div>
   <div class="masonry-col"></div>
   <div class="masonry-col"></div>
</div>

{ many more <div class="masonry"></div> elements }

<div class="masonry">
   <div class="masonry-col"></div>
   <div class="masonry-col"></div>
   <div class="masonry-col"></div>
</div>

<a>text</a>
<a>text</a>
<a class="skip-to-main-content">skip</a>
<a>text</a>
etc.

目前，我正在使用document.querySelectorAll('a:not(.class-within-masonry:not(.another-class-within-masonry')等来省略在元素之间找到的所有焦点元素。

let tabindex = 1;
let focusable = document.querySelectorAll('a:not(.class-within-masonry):not(.another-class-within-masonry')

//convert object into an array
let arr = $.map(focusable, function (value) {
   return [value];
});

转换对象后我的结果如下：

<a class="skip-to-main-content">skip</a>
<a class="a">text</a>
<a class="a">text</a>
<a class="a">text</a>

{focusable elements in masonry are omitted}

<a class="a">text</a>
<a class="a">text</a>
<a class="skip-to-main-content">skip</a>
<a class="a">text</a>
etc.

然后，我使用一个 for 循环来确定在砌体元素开始使用 for 循环和 if 语句来查找 skip-to-main-content 的第二个实例之后链接的位置：

for (i = 0; i <= arr.length; i++) {
   if (arr[i].toString().indexOf('maincontent') >= 0 && i != 0) {
        var secondHalfOfArray = arr.slice(tabindex - 2);
 }

(-2) 获取第二个 .skip-to-main-content 类之前的两个焦点元素。 我知道如果在 .skip-to-main-content 类之前插入或删除链接，我的代码将会中断。

我研究了以下 jQuery 方法：

.after()
.next()
.nextAll()
.siblings()

这些方法似乎不是我所追求的，因为它们似乎用于插入内容而不是用于选择元素。是否有 jQuery 方法可以让我在最后一个砌体块之后抓取第一个 A 标记和所有其他可聚焦元素？这可能吗？

标签： jqueryfocus