Chaining

With Sniper, you can chain together actions/methods.

Chaining allows you to run multiple methods (on the same element) within a single statement.

Sniper Method Chaining

Until now we have been writing javascript statements one at a time (one after the other).

However, there is a technique called chaining, that allows us to run multiple commands, one after the other, on the same element(s).

Tip: This way, browsers do not have to find the same element(s) more than once.

To chain an action, you simply append the action to the previous action.

NOTE: 📝 Chaining works because each Selector or 'Setter' method returns the selected element, enabling sequential actions on the same element without the browser needing to locate it multiple times.

Example

sniper.js

$('.toast-container > div').click(function(e){
    this.width('10rem').height(200);

});

sniper.js

$('.wrapper').css({
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    padding: 10,
}).children.css({
    border: '1px solid grey',
    padding: 10,
    borderRadius: 4,
    cursor: 'pointer', 
    height: 18, 
    overflow: 'hidden'
});