Jquery-获取非类的第一个

我有一个HTML列表，如下所示：

<div class="attachment-row">
    <div class="attachment-each"><a class="attachment-link" href="#"><i class="fas fa-file-pdf attachment-icon"></i><i class="fas fa-download attachment-icon"></i><span class="attachment-title">Resignation_069.pdf</span></a><i class="fas fa-trash"></i></div>
    <div class="attachment-each"><a class="attachment-link" href="#"><i class="fas fa-file-word attachment-icon"></i><i class="fas fa-download attachment-icon"></i><span class="attachment-title">ExitInterview-EMP/001.docx</span></a><i class="fas fa-trash"></i></div>
    <div class="attachment-each"><a class="attachment-link" href="#"><i class="fas fa-file-excel attachment-icon"></i><i class="fas fa-download attachment-icon"></i><span class="attachment-title">Checklist.xlsx</span></a><i class="fas fa-trash"></i></div>
    <div class="attachment-each"><a class="attachment-link" href="#"><i class="fas fa-file-image attachment-icon"></i><i class="fas fa-download attachment-icon"></i><span class="attachment-title">Screenshot_20180101.jpg</span></a><i class="fas fa-trash"></i></div>
    <div class="attachment-each"><a class="attachment-link" href="#"><i class="fas fa-file-image attachment-icon"></i><i class="fas fa-download attachment-icon"></i><span class="attachment-title">Pas Foto 2018.png</span></a><i class="fas fa-trash"></i></div>
</div>

但是如何选择第一个呢？

您可以使用以下方法：

使用.first（）：

使用eq（）：

使用JavaScript get（）：

使用JavaScript数组项选择器：

$(($(".attachment-each").not(".attachment-each-visible"))[0]).addClass("attachment-each-visible");

---

jQuery没有任何用处。使用普通JavaScript更简单

querySelector

已经只返回了第一项（与

querySelectorAll

相反），并且这些选择器受任何仍然相关的浏览器的支持，因此不需要jQuery的神奇（和缓慢）

。而不是
实现。如果您还没有使用jQuery，这也可以为您节省80+KB


var theFirst=document.querySelector（'.attachment-each:not（.attachment-each-visible'）；
第一个.classList.add（'attachment-each-visible'）

$（.attachment each”）.不是（“.attachment each visible”）[0]
？
：第一个
.first（）
？假设您的用户使用的是兼容浏览器。正如我所说的，Jup是相关浏览器。该功能存在于IE8+中，从IE9开始支持CSS3选择器，如
：not
。当然，如果你仍然想支持IE8，那么这是行不通的，是吗？caniuse显示它直到11点才出现在IE中。编辑：啊，mdn在IE8上显示它。有趣的差异。那是因为caniuse不再认为这些是相关的。但是，如果您单击矩阵上方的Show all，它将显示，ehm，all。但是我刚刚通过添加
元素.classList
；-）的用法，将依赖关系添加到IE10中在本例中，首选
first（）
或
eq（）
，因为后两种方法将元素从jQuery对象中分离出来，然后创建一个新的jQuery对象，其中前两种方法将从jQuery步骤中分离出来，因此脚本的工作量较小。
$(".attachment-each").not(".attachment-each-visible").first().addClass("attachment-each-visible");

$(".attachment-each").not(".attachment-each-visible").first().addClass("attachment-each-visible");

$(".attachment-each").not(".attachment-each-visible").eq(0).addClass("attachment-each-visible");

$(($(".attachment-each").not(".attachment-each-visible")).get(0)).addClass("attachment-each-visible");

$(($(".attachment-each").not(".attachment-each-visible"))[0]).addClass("attachment-each-visible");