One of the most exciting things about jQuery is the selector engine. Accessing DOM elements using selectors in jQuery is a fairly straightforward task, also because most selectors use the same expressions as CSS selectors. This is something that non-programmers web designers can easily grasp.
This article is an exercise in creating an arbitrary collector, you can use it as a guide to creating your own selector.

What did I want to achieve?

At the beginning, I needed to get every third item in the collection. (I was going to apply a separate style for every third element). I tried to write a simple script to solve this problem, but then I thought why it is impossible to do this in the form of a selector.
Creating "custom" selectors in jQuery is not that difficult. There is a wonderful article on this topic.
So, my goal was to select elements with a certain step, or in some cases I also had to start sampling from the n-th element, and not from the first ...
Here is the final code:

jQuery.expr[ ':' ].step = function (node,index,meta){
var $index = index;
var $meta = meta[3].toString().split( ',' );
var $step = parseInt($meta[0]);
var $start = ($meta.length > 1) ? $meta[1] : 0;
if ($start != 0) $start -= 1;
return ( ( ($index-$start) / $step ) == Math.floor( ( ($index-$start) / $step ) ) && ( ($index-$start) >= 0 ) );
};

We will analyze step by step

To start using this sequel, we must, of course, connect jQuery and the jquery.step.js file, which can be found and downloaded here .

<script type= "text/javascript" src= "jquery.js" ></script>
<script type= "text/javascript" src= "jquery.step.js" ></script>

The step selector uses the usual jQuery method to select elements. Here is an example for sampling every third item.

$( 'ul#one li:step(3)' ).css( 'clear' , 'left' );

As mentioned this selector can be used to fetch from a specific item. Suppose if you want to select every 3rd element from the 5th, it will look something like this:

$( 'ul#two li:step(3,5)' ).addClass( 'alt' );

The first parameter 3 shows the step, and the second parameter 5 shows the starting point of the sample. Parameters are separated by commas.

Practical use

If you have a gallery with thumbnails with float = left and you want to reset the wrap around every 4th thumbnail. Or you use a special class for each 10th item in the list for visual grouping. Or you can insert advertisements every 5 news items, but not before the first ... etc.
')

Important notes

There are some problems that I could not solve. I could not get the selector to work properly when it contains classes. Something about this selector, I had problems:

$( 'ul.one li:step(3)' ).css( 'clear' , 'left' );


If you have a solution - share it and we will all be grateful.
From the translator: examples are checked - everything seems to be working as it should - what problems the author does not fully understand.

From comments to the original:

There is already a simple selector in jQuery itself:
api.jquery.com/nth-child-selector
If you need an indent, just insert in the equality + indent.

Answer: This article is just an example of creating an arbitrary selector and nothing else. Thank.