How to make JavaScript / jQuery code shorter

Question

Is there a way to do this four times to make it shorter? I try to change the class from standing to sitting, and then again one at a time.

if(sitting > 0) {
    $('.standing:first-of-type').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:first-of-type').removeClass('sitting').addClass('standing');
}

if(sitting > 1) {
    $('.standing:nth-of-type(2)').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:nth-of-type(2)').removeClass('sitting').addClass('standing');
}

if(sitting > 2) {
    $('.standing:nth-of-type(3)').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:nth-of-type(3)').removeClass('sitting').addClass('standing');
}

if(sitting > 3) {
    $('.standing:nth-of-type(4)').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:nth-of-type(4)').removeClass('sitting').addClass('standing');
}

Answer 1

You can use :ltand :gtselectors.

:lt(index)select all elements with an index smaller indexinside the consistent set. :gt(index)select all elements with an index greater than indexthat within the agreed set. ^{From jQuery Docs}

sitting , .standing, index sitting, :lt sitting . addClass() removeClass() jQuery .

$('.standing:lt(' + sitting + ')').removeClass('standing').addClass('sitting');
$('.sitting:gt(' + sitting + ')').removeClass('sitting').addClass('standing');

Answer 2

, for-loop:

function toggleSitting(sitting){
    var initial = 0;
    var final = 3;
    for(var i = initial; i <= final; i++){
        $('.standing:nth-of-type(' + (i+1) +')')
            .toggleClass('standing', sitting < i)
            .toggleClass('sitting', sitting > i);
    }
}
toggleSitting(sitting);

Answer 3

, , , . , . :

var condition;
for(var i = 0; i < 4; i++){
    condition = sitting > i;
    $('.standing:nth-of-type(' + (i + 1) + ')').toggleClass('standing', !condition).toggleClass('sitting', condtion);
} 

Answer 4

, - :

var numberOfPlaces = 4;

for(var i=0; i<sitting && i<numberOfPlaces ; i++){
    $('.standing:nth-of-type(' + (i+1) + ')').removeClass('standing').addClass('sitting');
}

for(var i=sitting; i<numberOfPlaces ; i++){
    $('.sitting:nth-of-type(' + (i+1) + ')').removeClass('sitting').addClass('standing');
}

:

var numberOfPlaces = 4;

for(var i=0; i<numberOfPlaces; i++){
    if(i<sitting){
        $('.standing:nth-of-type(' + (i+1) + ')').removeClass('standing').addClass('sitting');
    }else if(i>=sitting){
        $('.sitting:nth-of-type(' + (i+1) + ')').removeClass('sitting').addClass('standing');
    }
}

Answer 5

HTML CSS?

, "nth" :

$('.standing:nth-of-type(' + i + ')')

, , = 1. , .

Without CSS and HTML, it’s not clear what exactly you want to do.

You can also look at this:

https://css-tricks.com/almanac/selectors/n/nth-of-type/