Jquery Addclass/Removeclass in specific order based on id attribute

Question

I'm attaching an addClass to a group of elements with the same class. However, I need it to be done in a specific order based on the ID attribute. I've been trying a for loop and the addClass based on the element with the ID at the loop number. However, this ends up applying the addClass at all once and I need it to do it one at a time based on the loop. How can I achieve this?

Originally I thought I could addClass, delay/setTimeOut, then removeClass, but no matter what I try, it seems to just want to apply to all elements at once when my desired affect is to loop through the IDs individually and addClass, delay, removeClass.

$("li.all-floors[id='1']").removeClass("on-floor");
 for (var i = 1; i <= floorValueNum; i++) {                                     

setTimeout(function() {
    	$("li.all-floors[id=" + (i-1) + "]").addClass("on-floor");
}, 1000);

            }

.on-floor{
    
    color: red;
           
}

.housing-floor {
    margin: 0;
    padding: .25em 2em;
    border-top: 2px solid #FFFFFF;
    text-align: center;
    line-height: 1em;
    font-size: .75em;
    text-align: center;
    color: black;
    font-weight: bold;
        -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.activity-floor {
    margin: 0;
    padding: .4em 2em;
    border-top: 2px solid #FFFFFF;
    text-align: center;
    line-height: 1.5em;
    font-size: .75em;
    text-align: center;
    color: black;
    font-weight: bold;
        -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.activity-floor-group, .housing-floor-group{
    list-style: none;
    padding: 0;
    margin: 0;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class= "housing-floor-group">
              <li class="housing-floor all-floors" id="42">42</li>
              <li class="housing-floor all-floors" id="40">40</li>
              <li class="housing-floor all-floors" id="38">38</li>
              <li class="housing-floor all-floors" id="36">36</li>
              <li class="housing-floor all-floors" id="34">34</li>
              <li class="housing-floor all-floors" id="32">32</li>
              <li class="housing-floor all-floors" id="30">30</li>
              <li class="housing-floor all-floors" id="28">28</li>
              <li class="housing-floor all-floors" id="26">26</li>
              <li class="housing-floor all-floors" id="24">24</li>
              <li class="housing-floor all-floors" id="22">22</li>
              <li class="housing-floor all-floors" id="20">20</li>
              <li class="housing-floor all-floors" id="18">18</li>
              <li class="housing-floor all-floors" id="16">16</li>
              <li class="housing-floor all-floors" id="14">14</li>
              <li class="housing-floor all-floors" id="12">12</li>
              <li class="housing-floor all-floors" id="10">10</li>
              <li class="housing-floor all-floors" id="8">08</li>
              <li class="housing-floor all-floors" id="6">06</li>
            </ul>
            <ul class= "housing-floor-group">
              <li class="housing-floor all-floors" id="43">43</li>
              <li class="housing-floor all-floors" id="41">41</li>
              <li class="housing-floor all-floors" id="39">39</li>
              <li class="housing-floor all-floors" id="37">37</li>
              <li class="housing-floor all-floors" id="35">35</li>
              <li class="housing-floor all-floors" id="33">33</li>
              <li class="housing-floor all-floors" id="31">31</li>
              <li class="housing-floor all-floors" id="29">29</li>
              <li class="housing-floor all-floors" id="27">27</li>
              <li class="housing-floor all-floors" id="25">25</li>
              <li class="housing-floor all-floors" id="23">23</li>
              <li class="housing-floor all-floors" id="21">21</li>
              <li class="housing-floor all-floors" id="19">19</li>
              <li class="housing-floor all-floors" id="17">17</li>
              <li class="housing-floor all-floors" id="15">15</li>
              <li class="housing-floor all-floors" id="13">13</li>
              <li class="housing-floor all-floors" id="11">11</li>
              <li class="housing-floor all-floors" id="9">09</li>
              <li class="housing-floor all-floors" id="7">07</li>
            </ul>
            <ul class="activity-floor-group">
                <li class="activity-floor all-floors" id="5">Pool</li>
                <li class="activity-floor all-floors" id="4">Gym</li>
                <li class="activity-floor all-floors" id="3">Restaurant</li>
                <li class="activity-floor all-floors" id="2">Meeting Rooms</li>
                <li class="on-floor activity-floor all-floors" id="1">Lobby</li>
      </ul>

Answer 1

Here is one way to do to it:

Create a recursive function and set a small delay via setTimeout()

$(document).ready(function(){


    // Use a counting variable to run through ids: (.all-floors #<1,2,3...>)
    // This method lets you run the animation in order, without sorting.
    var intervalCount = 1;
    var totalObjects = $(".all-floors").length;

    // Iterate through the all-floors objects, one-by-one via recursion
    function animateNextItem(){

        if (intervalCount >= totalObjects) return;

        // Grab the element according to its id number
        var element = $("#"+intervalCount);

        // If the element is an actual all-floor object
        if (element && element.hasClass("all-floors")){

            // add the class
            element.addClass("on-floor");

            // Set timer on when to remove the class, increase the 
            // intervalCount and call this function again
            setTimeout( function(){
                element.removeClass("on-floor");
                intervalCount++;
                animateNextItem();
                }, 500);    

        } else {

            // If you get here, it means that there wasn't an
            // .all-floors object with an id = intervalCount. So 
            // increase the intervalCount by one and try again
            intervalCount++;
            animateNextItem();  
        }
    }

    // Start the whole process here
    animateNextItem();

});

SEE THE CODE IN ACTION ON JSFIDDLE

Basically, you use a counting variable to run through the list of id's in order, and call a recursive function to apply/remove the classes via the setTimeout() function. If you copy and past this code into your file, you should see that the elements "animate in" and then "animate out" in order. Doing things this way assumes that you assign a unique number to each of the elements, but will still work even if you skip an index (say you assign #1 and #3, but forgot to assign #2, it will still work). This saves you from having to grab each element, add them to an array, and then sort the array based on id number to animate things in order. It also gives you the freedom to control the timing of the animation by adjusting the timer on the setTimeout() function.