Question

我正在使用jquery插件＆＃34; hopscotch＆＃34; Hopscotch

我也在使用＆＃34;简单易用的标签＆＃34;插件将标签转换为手风琴风格，以便做出响应。

Hopscotch允许我们编写一个阶梯式教程，该教程依赖于每个步骤都有一个＆＃34; target＆＃34;定义。目标在插件页面上定义为：

target [STRING / ELEMENT / ARRAY] - 目标DOM元素或DOM元素本身的ID。也可以定义几个目标的数组。如果提供了数组，Hopscotch将使用页面上存在的第一个目标并忽略其余目标。

因此，我想为我的目标设置一个数组，以便无论DOM是显示标签还是手风琴，它都会获得正确的元素。

手风琴中的HTML看起来像这样：

<div id="profileFormTabs" style="display: block; width: 100%; margin: 0px;">

<div class="resp-tabs-container">
    <h2 class="resp-accordion" role="tab" aria-controls="tab_item-0">
    // content here
    </h2>
    <h2 class="resp-accordion" role="tab" aria-controls="tab_item-1">
    // content here
    </h2>
    <h2 class="resp-accordion resp-tab-active" role="tab" aria-controls="tab_item-2">
    // content here
    </h2>
</div>

</div>

我的第一个目标是这样的：

target: ['profileFormTabs', '.resp-tabs-container > h2'],

这正确地定位了profileFormTabs的id（如果他们正在查看标签），并且如果他们正在查看DOM并且它是单独的，那么它也正确地定位第一个h2元素。

我的第二个目标配置为：

target: ['#profileFormTabs ul > li:nth-child(2n)', '.resp-tabs-container > h2:nth-of-type(1)'],

这也适用于标签。但是，它对于手风琴者来说并不起作用。

我试过了：

.resp-tabs-container > h2:nth-child(2n)
...
.resp-tabs-container > h2 > h2
...
document.getElementsByClassName("resp-tabs-container").nextSibling
etc

但无济于事。

我无法在不更改“简单易用”标签的情况下为手风琴中的所有元素添加ID。我不想做的插件（因此在发布新更新时很容易更新）。

我没有运气使用jQuery作为我的目标选择器。所以我想知道这是否可以使用纯粹的javascript / css？

非常感谢

Answer 1

例如，您可以使用document.querySelectorAll('h2:nth-child(1) ul li:nth-child(2)')。

Answer 2

非常感谢所有答案。我已经直接修改了插件，以实现我所需要的。

再次感谢： - ）

如何在div中选择h2元素的nth-child

2 个答案: