Element selector: Select above the tenth element

Question

Element selector: Select above the tenth element

Navigation

#1 by (1 votes)
#2 by (1 votes)

-4

I have a list of divs that are randomly populated on the screen. How do I select from the tenth element repeated upwards with jquery?

<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>
<div class='img'><img src='imagem.jpg'></div>

I would like to select with jquery only from the tenth div with img class to front

jquery

asked by anonymous 29.08.2018 / 19:52

2 answers

1

Via selector I'm almost certain to be impossible, however there is the method .slice() that is proper to "filter" taking only what you want, example:

$(function () {
    var els = $('.img').slice(9);

    //Exibe os elementos
    els.each(function () {
        console.log(this);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div><divclass='img'><imgsrc='imagem.jpg'></div>

NotethatIused9insteadof10,thisisbecausetheindexstartsfromzero,iethefirstelementbelongstotheindex0,justasthesecondbelongstotheindex1(asinanarray).

Notealsothatsliceallowsyoutodefinethelastonetobetakenalsoifyoudefinethesecondparameter.slice(primeiro,ultimo),forexample:

$(function () {
    //Pega do terceiro até o quinto elemento
    var els = $('.img').slice(2, 5);

    //Exibe os elementos
    els.each(function () {
        console.log(this);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass='img'>1</div><divclass='img'>2</div><divclass='img'>3</div><divclass='img'>4</div><divclass='img'>5</div><divclass='img'>6</div><divclass='img'>7</div><divclass='img'>8</div><divclass='img'>9</div><divclass='img'>10</div>

GettingthelatestelementswithjQuery.slice

Justapplythenegativevalue:

$(function () {
    //Pega o 10 e 9 elementos
    var els = $('.img').slice(-2);

    //Exibe os elementos
    els.each(function () {
        console.log(this);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass='img'>1</div><divclass='img'>2</div><divclass='img'>3</div><divclass='img'>4</div><divclass='img'>5</div><divclass='img'>6</div><divclass='img'>7</div><divclass='img'>8</div><divclass='img'>9</div><divclass='img'>10</div>

Tolimitpassthesecondparameter,intheexample-2removethelast2elements:

$(function () {
    //Pega do quinto até o oitavo elemento
    var els = $('.img').slice(-6, -2);

    //Exibe os elementos
    els.each(function () {
        console.log(this);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='img'>1</div>
<div class='img'>2</div>
<div class='img'>3</div>
<div class='img'>4</div>
<div class='img'>5</div>
<div class='img'>6</div>
<div class='img'>7</div>
<div class='img'>8</div>
<div class='img'>9</div>
<div class='img'>10</div>

29.08.2018 / 20:51

score 1 · Accepted Answer

Just to leave a response registered here on the site using jQuery selectors as you can without using any CSS-only script :

Select up to the ninth:

$(document).ready(function() {
  $(".img:nth-of-type(-n+9)").css("background-color","red");
})

.img{
   border-bottom: solid 1px;
   padding-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass='img'>01</div><divclass='img'>02</div><divclass='img'>03</div><divclass='img'>04</div><divclass='img'>05</div><divclass='img'>06</div><divclass='img'>07</div><divclass='img'>08</div><divclass='img'>09</div><divclass='img'>10</div><divclass='img'>11</div><divclass='img'>12</div>

Selectfromtenth:

$(document).ready(function() {
   $(".img:nth-of-type(n+10)").css("background-color","red");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='img'>01</div>
<div class='img'>02</div>
<div class='img'>03</div>
<div class='img'>04</div>
<div class='img'>05</div>
<div class='img'>06</div>
<div class='img'>07</div>
<div class='img'>08</div>
<div class='img'>09</div>
<div class='img'>10</div>
<div class='img'>11</div>
<div class='img'>12</div>