代码之家 › 专栏 › 技术社区 › Dolorosa

jquery-获取非类的第一个

html jquery

-2

Dolorosa · 技术社区 · 6 年前

我有一个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>

我要上课 attachment-each-visible 对一些 attachment-each 使用jquery,假设是随机的。在下一个函数中,我要添加类 每个可见附件 到第一 各附件 没有课 每个可见附件 .

我知道如何选择 各附件 那不是 每个可见附件 这种方式:

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

但是如何选择第一个呢?

3 回复 | 直到 6 年前

chresse 6 年前

你可以用 first() 方法:

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

Ali Sheikhpour 6 年前

使用.first():

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

使用EQ():

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

使用javascript get():

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

使用javascript数组项选择器:

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

GolezTrol 6 年前

对jquery没有用处。使用简单的javascript更简单。 querySelector 已经只返回第一个项(与 querySelectorAll )并且这些选择器由任何仍然相关的浏览器支持,因此不需要jquery的魔力(和慢速)。 .not 实施。如果您还没有使用jquery,它还可以为您节省80+kb。

var theFirst = document.querySelector('.attachment-each:not(.attachment-each-visible)');

theFirst.classList.add('attachment-each-visible');

<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 attachment-each-visible"><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 attachment-each-visible"><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>