CODEWITHSUNDEEP
javascriptjquery
user2177393
user2177393

Reputation: 99

Targeting CSS on div range

I have an element I populate with $.ajax now I want to fade all the custom loaded elements, the element is already pre-populated with 20 elements when the page loads, I don't want to target those 20. Essentially, how can I target the latter 17 divs assuming I have 37 divs total? Currently I use:

while ($(".info #future>center>div").length>20) {
  $(".info #future>center>div:last-child").remove();
}

to remove them, but now I also want a fading effect to be applied prior, assigning anything to their class is not an option since that property is already taken.

Upvotes: 1

Views: 64

Answers (2)

Ravi Gadag
Ravi Gadag

Reputation: 15861

you can use `slice() Slice() method of jquery. Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument. The supplied start index identifies the position of one of the elements in the set; if end is omitted, all elements after this one will be included in the result.

 $('.info #future>center>div').slice(20).remove(); //Where start and end your  index to filter.  I omitted end parameter. if you want you can put it. .slice(20,37)

if you want fading effect 

$('.info #future>center>div').slice(20).fadeOut(300, function() { $(this).remove(); });

Upvotes: 2

ebram khalil
ebram khalil

Reputation: 8321

take look on jQuery :gt() Selector.

it used to select all elements at an index greater than index provided to it so you can call it with index = 20

$(".info #future>center>div:gt(20)").remove();

Upvotes: 0

Related Questions