CODEWITHSUNDEEP
jquery
Gregory Schultz
Gregory Schultz

Reputation: 844

How to assign a class to divs based on a calulcated number

Is there a way to assign a class to a div based on a variable?

My example code:

<button id="prev-item">Calculate</button>
<div class="main">
  <div class="item"><div class="current">item 1</div></div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
</div>

Example JS:

$("#prev-item").on("click", function(){
  var firstcal = $('.main').children().length;
  var actual = firstcal - 7
});

The code I provided counts how many divs there are in .main and stores the number in firstcal and then actual takes the number in firstcal and subtracts 7 from it. In this example, it's 3.

I'm looking for a way to assign a class called .scroll to .items based on the number in the variable actual. So in this example, assign .scroll to the first three items in .main (item 1, item 2, item 3).

JS fiddle: https://jsfiddle.net/openbayou/xfa34qup/

Upvotes: 1

Views: 37

Answers (2)

Anton Christensen
Anton Christensen

Reputation: 36

I hope this is what you wished for. It takes the amount of divs with the class "Item" and subtracts 7 from that number. Then assigns class "scroll" to the first (totalNumberOfDivs-7) divs and leave the rest as they are

<script type="text/javascript">
        $(document).ready(function(){
            $("#prev-item").click(function(){ //On button click
                var numberOfDivs = 0; //Set total number of divs
                var thisDivNumber = 0; //Set current div

                $(".item").each(function(){ //Figure out how many divs there are
                    numberOfDivs = numberOfDivs+1 //Add them up one by one
                });
                var assignClassToThese = numberOfDivs-7 //Total number of divs minus 7
                $(".item").each(function(){ //Loop through the divs to see which ones to assign the class to
                    thisDivNumber = thisDivNumber+1 
                    if(thisDivNumber<=assignClassToThese){ //If this div number is less than or equal to the number of divs minus 7, then add class
                        $(this).addClass("scroll"); 
                    }
                });
            });
        });
    </script>
<button id="prev-item">Calculate</button>
<div class="main">
  <div class="item"><div class="current">item 1</div></div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
</div>

Upvotes: 0

Chay22
Chay22

Reputation: 2894

You can loop through it using .each which gets parameter index indicating the index of the element being loop then check if the iterating element index is less than the actual (maximum) index.

$("#prev-item").on("click", function(){
  var $children = $('.main').children();
  var firstcal = $children.length;
  var actual = firstcal - 7
  $( "span" ).text( actual );
  
  // reset for previously added class
  // $children.removeClass('scrollup')
  
  $children.each(function (i) {
    if (i < actual) {
      $(this).addClass('scrollup')
    }
  })
});
.current {color:red}
.item {padding: 7px}
.main {height:265px;overflow:auto}
.scrollup {border-left:5px solid blue}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<button id="prev-item">Calculate</button>
<div class="main">
  <div class="item"><div class="current">item 1</div></div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
</div>
<span></span>

Upvotes: 2

Related Questions