Using jQuery to alter the class of div elements in a specific sequence

Question

Using jQuery to alter the class of div elements in a specific sequence

Currently, I am working on a blog layout using Bootstrap and have encountered an issue.

The specific layout requirement is to have the first two divs as col-md-3 (NORMAL), followed by the next 2 divs as col-md-6 (WIDE), then repeating this pattern for the next 4 divs as col-md-3 (NORMAL), the next 2 divs as col-md-6(WIDE), and so on.

I have attempted a method in CodePen (code below) which achieves the desired layout. However, due to my limited experience with jQuery, I believe there might be a more efficient way to accomplish this. Any guidance or assistance you can provide would be greatly appreciated!

HTML:

  <div class="container">
  <div class="row" id="blog">
    <div>Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    ... (more HTML code)
    <div class="">Normal</div>
  </div>
</div>

jQuery used:

$("#blog div").each(function(i) {
var newClass = 'col-md-3 red';
if (i == 2 || i == 3 || i == 8 || i == 9 || i == 14 || i == 15 || i == 20 || i == 21 || i == 26 || i == 27 || i == 32 || i == 33) {
newClass = 'col-md-6 blue';
}
$(this).addClass(newClass);
});

javascript html jquery css algebra

Answer 1

Answer №1

To achieve this, you can utilize both the .not() and .filter() methods.

$('#blog div').addClass('col-md-3 red')         // applying red class to all div elements
  .not(':lt(2)')                                // excluding the first two Normal elements
  .filter(function(i){                          // filtering for Wide elements
    return (i % 6 == 0) || ( (i % 6) - 1 == 0)  // selecting every 6th element and its next neighbor
  }).addClass('col-md-6 blue');                 // adding 'blue' class to the Wide elements

.red{
  background : red;
}
.blue{
  background : blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="blog">
    <div>Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    // more div elements...
  </div>
</div>

Answer 2

To achieve this, you can utilize both the .not() and .filter() methods.

$('#blog div').addClass('col-md-3 red')         // applying red class to all div elements
  .not(':lt(2)')                                // excluding the first two Normal elements
  .filter(function(i){                          // filtering for Wide elements
    return (i % 6 == 0) || ( (i % 6) - 1 == 0)  // selecting every 6th element and its next neighbor
  }).addClass('col-md-6 blue');                 // adding 'blue' class to the Wide elements

.red{
  background : red;
}
.blue{
  background : blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="blog">
    <div>Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    // more div elements...
  </div>
</div>

Answer 3

Answer №2

This solution loops through each individual div element and assigns the corresponding class based on a predefined order stored in a pattern array. While it may not be significantly more concise than your current implementation, it offers a key advantage - flexibility. If you decide to adjust the number of div elements or modify the pattern itself, simply updating the items in the pattern array will yield an immediate change in output.

elements = $("#blog").children();
pattern = ['col-md-3','col-md-3',
          'col-md-6','col-md-6',
          'col-md-3', 'col-md-3'];
  pattern_val = 0;
  for (var i=0;i<elements.length;i++) {
    if (pattern_val < 6) {
      $(elements[i]).addClass(pattern[pattern_val]);
      pattern_val += 1;
    }
    else {
      pattern_val = 0;
      $(elements[i]).addClass(pattern[pattern_val]);
      pattern_val += 1;
    }
};

For a live demonstration, check out this CodePen example.

Answer 4

This solution loops through each individual div element and assigns the corresponding class based on a predefined order stored in a pattern array. While it may not be significantly more concise than your current implementation, it offers a key advantage - flexibility. If you decide to adjust the number of div elements or modify the pattern itself, simply updating the items in the pattern array will yield an immediate change in output.

elements = $("#blog").children();
pattern = ['col-md-3','col-md-3',
          'col-md-6','col-md-6',
          'col-md-3', 'col-md-3'];
  pattern_val = 0;
  for (var i=0;i<elements.length;i++) {
    if (pattern_val < 6) {
      $(elements[i]).addClass(pattern[pattern_val]);
      pattern_val += 1;
    }
    else {
      pattern_val = 0;
      $(elements[i]).addClass(pattern[pattern_val]);
      pattern_val += 1;
    }
};

For a live demonstration, check out this CodePen example.

Answer 5

Answer №3

retrieve the current element's content using the text method.

$("#blog div").each(function(i) {
    var newClass = 'col-md-3 red';
    var text = $(this).text();
    if (text == "Wide") {
        newClass = 'col-md-6 blue';
    }
    $(this).addClass(newClass);
}

Answer 6

retrieve the current element's content using the text method.

$("#blog div").each(function(i) {
    var newClass = 'col-md-3 red';
    var text = $(this).text();
    if (text == "Wide") {
        newClass = 'col-md-6 blue';
    }
    $(this).addClass(newClass);
}

Answer 7

Answer №4

This choice is mine to make. It involves objects and their respective keys. Each object (class) is linked to specific keys (index).

let obj = {
  "col-md-3": [1, 2, 5, 6, 7, 8, 11, 12, 13, 14, 17, 18, 19, 20, 23, 24, 25, 26, 29, 30, 31, 32, 35, 36],
  "col-md-6": [3, 4, 9, 10, 15, 16, 21, 22, 27, 28, 33, 34]
}

let objKeys = Object.keys(obj),
    objValues = Object.values(obj);

let nodes = document.querySelectorAll("#blog div");

for (var i = 0; i < nodes.length; i++) {            
    let index = objValues.findIndex(id => id.indexOf(i + 1) > -1)
    
    if (index > -1) {
        nodes[i].classList.add(objKeys[index]);
    }
}

$(nodes).each(function(i) {
  $(this).addClass(obj[i]);
});

.col-md-3, 
.col-md-6 {
  border: 1px solid green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="blog">
    <div class="">Normal</div>

	<!-- Additional code trimmed for brevity -->

    <div class="">Wide</div>
    <div class="">Normal</div>
  </div>
</div>

Answer 8

This choice is mine to make. It involves objects and their respective keys. Each object (class) is linked to specific keys (index).

let obj = {
  "col-md-3": [1, 2, 5, 6, 7, 8, 11, 12, 13, 14, 17, 18, 19, 20, 23, 24, 25, 26, 29, 30, 31, 32, 35, 36],
  "col-md-6": [3, 4, 9, 10, 15, 16, 21, 22, 27, 28, 33, 34]
}

let objKeys = Object.keys(obj),
    objValues = Object.values(obj);

let nodes = document.querySelectorAll("#blog div");

for (var i = 0; i < nodes.length; i++) {            
    let index = objValues.findIndex(id => id.indexOf(i + 1) > -1)
    
    if (index > -1) {
        nodes[i].classList.add(objKeys[index]);
    }
}

$(nodes).each(function(i) {
  $(this).addClass(obj[i]);
});

.col-md-3, 
.col-md-6 {
  border: 1px solid green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="blog">
    <div class="">Normal</div>

	<!-- Additional code trimmed for brevity -->

    <div class="">Wide</div>
    <div class="">Normal</div>
  </div>
</div>

Using jQuery to alter the class of div elements in a specific sequence

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Capture selected items from checkboxes and incorporate them into the CSS styling

Utilize or Bring in an external JavaScript file within Ionic 2

Display the result from an Ajax call

Arrange an item independently of surrounding elements

Obtain a transformed mesh that has been displaced using a displacementMap within three.js

Customizing Vue: Implementing an automatic addition of attributes to elements when using v-on:click directive

Creating a horizontal HTML table to display the output of a foreach loop

Retrieving the scrollTop() property of a specific element within an Iframe

Tips for implementing JavaScript or jQuery to enable page transitions in a single-page website

How can you refresh the source element?

Utilizing Angular's web architecture involves nesting components and concealing them with the ng-hide directive

Adjusting the background color of the list item

Adding style tags dynamically to a component and then encapsulating the styles again (using Angular)

Having Trouble with Centering in Bootstrap 4

Tips for enhancing the speed of drawing circles in mouse movement using JS and CANVAS

Executing a fundamental three.js program

What is the best way to retrieve data from only the first few XML entries using AJAX?

Attempting to apply a class to selected elements, however, the conditional statement is not functioning as intended

progressing both forward and backward through every month

Having trouble populating the dropdown menu with data retrieved from the database