Clever Geek Handbook

Jquery Addclass / Removeclass in specific order based on id attribute

I am adding addClass to an element group with the same class. However, I need this to be done in a specific order based on the ID attribute. I've tried a for loop and addClass based on an element with an id in the loop number. However, it ends up with the addClass application being executed once and I need it to execute one at a time depending on the loop. How can I achieve this?

I originally thought I could addClass, delay / setTimeOut and then removeClass, but whatever I try, it seems I just want to apply to all elements at once when my desire is to affect the passing of 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>
Run codeHide result


+3


source to share


3 answers


Here's one way to do it:

Create a recursive function and set a small delay with 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 CODE IN ACTION ON JSFIDDLE

Basically, you use a counting variable to execute in order the list of ids and call a recursive function to apply / remove classes using the function setTimeout()

. If you copy and run this code into your file, you will see that the elements are "awaiting" and then "animating" in order. Doing it this way assumes that you assign a unique number to each of the elements, but it will still work even if you skip the index (let's say you assign # 1 and # 3, but forgot to assign # 2, it will still work). This saves you the trouble of grabbing each element, adding them to the array, and then sorting the array based on the id number to animate things in order. It also gives you the ability to control the timing of the animation by setting the timer to function setTimeout()

.

+1


source


You should probably remove the class from all li elements before you start applying them in a loop, not just one element. $ ("li.all-floors [id = '1']"). removeClass ("on the floor"); Try,

$("li").removeClass("on-floor");

Oh yeah, and be sure to increase the time by one second on each iteration. :) so,



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

For the effect to be applied, it is applied in order.

0


source


try this script:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("li.all-floors[id='1']").removeClass("on-floor");
        var floorValueNum = 10;
        for (var i = 1; i <= floorValueNum; i++) { 
            add(i);
        }
        function add(i) {
            setTimeout(function() {$("li.all-floors[id=" + (i-1) + "]").addClass("on-floor");}, 1000 + i * 1000);
        }
    });
</script>

<style>
.activity-floor-group .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;
}
</style>
</head>
<body>

<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="activity-floor all-floors" id="1">Lobby</li>
      </ul>

</body>
</html>
0


source






More articles:


All Articles