Element selector: Select above the tenth element

Asked

Viewed 43 times

-4

I have a list of Ids that are filled randomly on the screen. How do I select from the tenth element repeated up 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 Top div with forward img class

jquery

  • Dude Do you already have code? HTML/CSS/JS ? Only with your report do not answer you precisely....

  • ok I know only I’ve read a lot of jquery manual selector and I haven’t found anything like it so I don’t have Cod. if anyone knows at least the name of the function I’ll come later.

2 answers

1

Via selector I’m almost certain it’s 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>

<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>

Note that I used 9 instead of 10, this because the Indice starts from scratch, ie the first element belongs to the index 0, as well as second belongs to the index 1 (as in an array).

Note also that slice allows you to set the last to be picked up also if you set the second parameter .slice(primeiro, ultimo), for example:

$(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>

<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>

Picking up the last elements with jQuery.Lice

Just apply the negative value:

$(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>

<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>

To limit pass the second parameter, in the example -2 removes the last 2 elements:

$(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>

  • and how I would give an Hide only in the tenth or largest element ?

  • @Jasarorion can use $('.img').slice(9).hide(), or you can use a class $('.img').slice(9).addClass('minha-classe-definida-no-css-que-oculta'), may be a class of its own or a class of an FW, such as Bootstrap, but that depends on what you use.

  • 1

    show heim did not know this function thank you very much

1


Just to leave a recorded response here on the site using selectors from jQuery just as it is possible to do without using any script only with CSS:

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>

<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>

Select from the tenth:

$(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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.