jquery - 如何使用第一个类型

Question

我的html代码我不会只得到第一a[rel=next]元素

<div id="devices">
    <div class="display-controls">
        <div class="pagenav">
            <a rel="next" class="ahrf" href=".html"><i class="fa fa-angle-right"></i></a>
            <a rel="last" class="ahrf" href=".html">Last <i class="fa fa-angle-double-right"></i></a>
        </div>
    </div>
    /**some code**/

    <div class="display-controls">
        <div class="pagenav">
            <a rel="next" class="ahrf" href=".html"><i class="fa fa-angle-right"></i></a>
            <a rel="last" class="ahrf" href=".html">Last <i class="fa fa-angle-double-right"></i></a>
        </div>
    </div>
</div>

如何只得到第一个<a rel="next"我的尝试

 $('.display-controls .pagenav a[rel="next"]:first-of-type')

不工作

Answer 1

请尝试如下:

var res = $('.display-controls .pagenav a[rel="next"]:first');
console.log("result",res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="devices">
    <div class="display-controls">
        <div class="pagenav">
            <a rel="next" class="ahrf" href=".html">next1<i class="fa fa-angle-right"></i></a>
            <a rel="last" class="ahrf" href=".html">Last <i class="fa fa-angle-double-right"></i></a>
        </div>
    </div>
    /**some code**/

    <div class="display-controls">
        <div class="pagenav">
            <a rel="next" class="ahrf" href=".html">next2<i class="fa fa-angle-right"></i></a>
            <a rel="last" class="ahrf" href=".html">Last <i class="fa fa-angle-double-right"></i></a>
        </div>
    </div>
</div>