如何选择这些按钮中的第一个

How to select the first of these buttons?

本文关键字：按钮 第一个 何选择 选择      更新时间：2023-09-26

我想使用 Greasemonkey 脚本来单击按钮。

按钮

HTML的开头如下所示;有3个按钮，分别对应于48/50/52。48/50/52 并不相同，那么有没有办法通过选择class="modeNum"中的第一个来有选择地单击按钮？

我只想点击第一个。

按钮代码：

<dl class="numSize">
    <dt>size:</dt>
    <dd class="modeNum">
        <a href="javascript:void(0);" rev="6" rel="3">48</a>
        <a href="javascript:void(0);" rev="10" rel="3">50</a>
        <a href="javascript:void(0);" rev="1" rel="1">52</a></dd>
        <dd class="dps">
        <a href="javascript:;">size chart</a>
    </dd>
    <dd class="clear"></dd>
</dl>

。单击第二个按钮时，代码将更改为：

<dl class="numSize">
    <dt>size:</dt>
    <dd class="modeNum">
        <a href="javascript:void(0);" rev="6" rel="3">48</a>
        <a class="Active" href="javascript:void(0);" rev="10" rel="3">50</a>
        <a href="javascript:void(0);" rev="1" rel="1">52</a></dd>
        <dd class="dps">
        <a href="javascript:;">size chart</a>
    </dd>
    <dd class="clear"></dd>
</dl>


如何使用document.querySelector选择第一个<a>元素？

回复：

如何使用document.querySelector选择第一个元素？

这很简单document.querySelector因为它总是只返回第一个匹配元素（如果有的话）。

您只需要使用：

var firstBtn = document.querySelector ("dl.numSize > dd.modeNum > a");
if (firstBtn) {
    // DO YOUR CLICK OR WHATEVER, HERE.
}

或者，如果您想格外确定：

var firstBtn = document.querySelector ("dl.numSize > dd.modeNum > a:first-of-type");
if (firstBtn) {
    // DO YOUR CLICK OR WHATEVER, HERE.
}

在这种情况下，jQuery 选择器是相同的：

var firstBtn = $("dl.numSize > dd.modeNum > a:first-of-type");
if (firstBtn.length) {
    // DO YOUR CLICK OR WHATEVER, HERE.
}

参考：

  • W3C， CSS 选择器规范
  • CSS3 选择器兼容性
相关文章：