Styling elements using the nth-child selector in JavaScript

Question

Styling elements using the nth-child selector in JavaScript

I am trying to apply a CSS class based on the combined height of the 2nd and 3rd child elements. For example, if the height of the 2nd child plus the height of the 3rd child equals a certain value, I want to add a specific class.

Here is my JavaScript code to perform this calculation -

$(function() {
var fl = $('ul img:nth-child(3n+3)').height();
var fr = $('ul img:nth-child(3n+4)').height();
var result = fl + fr;
if (result == 1092) {
    $('ul img:nth-child(3n+3)').addClass('style1a');
    $('ul img:nth-child(3n+4)').addClass('style1b');
}
else if (result == 2460) {
    $('ul img:nth-child(3n+3)').addClass('style2a');
    $('ul img:nth-child(3n+4)').addClass('style2b');
}
else if (result == 1776) {
    $('ul img:nth-child(3n+3)').addClass('style3a');
    $('ul img:nth-child(3n+4)').addClass('style3b');
}
});

The current script works by calculating the height of the first iteration of 3n+3 and 3n+4, then applies the style to all instances of 3n+3.

However, I need to modify the JavaScript to calculate the height of every iteration of 3n+3 and 3n+4, rather than just the initial one, and then apply the CSS style accordingly.

If the sum of li(3)+li(4) equals a certain value, add a style. If the sum of li(6)+li(7) equals another value, add a different style.

Thank you in advance for any assistance!

javascript css

Answer 1

Answer №1

When dealing with pairs of elements individually, it is necessary to iterate over the collection. Here is an example:

http://jsfiddle.net/b187z18q/

var $threes = $('ul img:nth-child(3n+3)');  // get collection of all elements matching 3n+3
var $fours = $('ul img:nth-child(3n+4)');   // get collection of all elements matching 3n+4

for(var i = 0; i < $fours.length; i++){
    var $three = $threes.eq(i);  // get individual element
    var $four = $fours.eq(i);    // get individual element

    var result = $three.height() + $four.height();

    if (result == 109) {
        $three.addClass('style1a');
        $four.addClass('style1b');
    } else if (result == 246) {
        $three.addClass('style2a');
        $four.addClass('style2b');
    } else if (result == 177) {
        $three.addClass('style3a');
        $four.addClass('style3b');
    }
}

$(function() {
  var $threes = $('ul img:nth-child(3n+3)');
  var $fours = $('ul img:nth-child(3n+4)');

  for (var i = 0; i < $fours.length; i++) {
    var $three = $threes.eq(i);
    var $four = $fours.eq(i);

    var result = $three.height() + $four.height();
    console.log(result);
    if (result == 109) {
      $three.addClass('style1a');
      $four.addClass('style1b');
    } else if (result == 246) {
      $three.addClass('style2a');
      $four.addClass('style2b');
    } else if (result == 177) {
      $three.addClass('style3a');
      $four.addClass('style3b');
    }
  }




});

.style1a,
.style1b {
  border: 1px solid blue;
}
.style2a,
.style2b {
  border: 1px solid red;
}
.style3a,
.style3b {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <img src="http://placehold.it/35x50" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x59" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x100" />
    <img src="http://placehold.it/35x77" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x146" />
    <img src="http://placehold.it/35x100" />

    <img src="http://placehold.it/35x50" />
  </li>
</ul>

Answer 2

When dealing with pairs of elements individually, it is necessary to iterate over the collection. Here is an example:

http://jsfiddle.net/b187z18q/

var $threes = $('ul img:nth-child(3n+3)');  // get collection of all elements matching 3n+3
var $fours = $('ul img:nth-child(3n+4)');   // get collection of all elements matching 3n+4

for(var i = 0; i < $fours.length; i++){
    var $three = $threes.eq(i);  // get individual element
    var $four = $fours.eq(i);    // get individual element

    var result = $three.height() + $four.height();

    if (result == 109) {
        $three.addClass('style1a');
        $four.addClass('style1b');
    } else if (result == 246) {
        $three.addClass('style2a');
        $four.addClass('style2b');
    } else if (result == 177) {
        $three.addClass('style3a');
        $four.addClass('style3b');
    }
}

$(function() {
  var $threes = $('ul img:nth-child(3n+3)');
  var $fours = $('ul img:nth-child(3n+4)');

  for (var i = 0; i < $fours.length; i++) {
    var $three = $threes.eq(i);
    var $four = $fours.eq(i);

    var result = $three.height() + $four.height();
    console.log(result);
    if (result == 109) {
      $three.addClass('style1a');
      $four.addClass('style1b');
    } else if (result == 246) {
      $three.addClass('style2a');
      $four.addClass('style2b');
    } else if (result == 177) {
      $three.addClass('style3a');
      $four.addClass('style3b');
    }
  }




});

.style1a,
.style1b {
  border: 1px solid blue;
}
.style2a,
.style2b {
  border: 1px solid red;
}
.style3a,
.style3b {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <img src="http://placehold.it/35x50" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x59" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x100" />
    <img src="http://placehold.it/35x77" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x146" />
    <img src="http://placehold.it/35x100" />

    <img src="http://placehold.it/35x50" />
  </li>
</ul>

Answer 3

Answer №2

This method may not be the most efficient way to solve this issue. Relying on exact heights can lead to bugs, as even a one pixel change could disrupt your code. It might be better to use less than/greater than comparisons rather than equals or assigning classes to elements. Additionally, it's recommended to declare your jQuery variables only once. Here is a suggested refactored version:

$(function() {
var foo = $('ul img:nth-child(3n+3)');
var bar = $('ul img:nth-child(3n+4)');

switch(foo.height() + bar.height()) {
  case == 1092: 
    // Avoid basing logic on precise heights
    // Consider alternative methods to determine styling
    foo.addClass('style1a');
    bar.addClass('style1b');
    break;
  case == 2460:
    foo.addClass('style2a');
    bar.addClass('style2b');
    break;
  case == 1776:
    foo.addClass('style2a');
    bar.addClass('style3b');
    break;
}

Answer 4

This method may not be the most efficient way to solve this issue. Relying on exact heights can lead to bugs, as even a one pixel change could disrupt your code. It might be better to use less than/greater than comparisons rather than equals or assigning classes to elements. Additionally, it's recommended to declare your jQuery variables only once. Here is a suggested refactored version:

$(function() {
var foo = $('ul img:nth-child(3n+3)');
var bar = $('ul img:nth-child(3n+4)');

switch(foo.height() + bar.height()) {
  case == 1092: 
    // Avoid basing logic on precise heights
    // Consider alternative methods to determine styling
    foo.addClass('style1a');
    bar.addClass('style1b');
    break;
  case == 2460:
    foo.addClass('style2a');
    bar.addClass('style2b');
    break;
  case == 1776:
    foo.addClass('style2a');
    bar.addClass('style3b');
    break;
}

Answer 5

Answer №3

When using the $ function in jQuery to select elements, it always returns a collection even if there is only one matching element. This means that jQuery will look for properties and methods of the first member of the collection by default. To avoid this behavior, you should use jQuery.each() instead.

If you want to calculate the height of specific images within a ul list, your function body should start with the following lines:

var totalHeight;
$('ul img:nth-child(3n+3)').each(function(index, element) {
    totalHeight += element.height;
}
$('ul img:nth-child(3n+4)').each(function(index, element) {
    totalHeight += element.height;
}

The usage of = and += on the same line can be confusing, but the provided code snippet takes care of that for you.

Answer 6

When using the $ function in jQuery to select elements, it always returns a collection even if there is only one matching element. This means that jQuery will look for properties and methods of the first member of the collection by default. To avoid this behavior, you should use jQuery.each() instead.

If you want to calculate the height of specific images within a ul list, your function body should start with the following lines:

var totalHeight;
$('ul img:nth-child(3n+3)').each(function(index, element) {
    totalHeight += element.height;
}
$('ul img:nth-child(3n+4)').each(function(index, element) {
    totalHeight += element.height;
}

The usage of = and += on the same line can be confusing, but the provided code snippet takes care of that for you.

Styling elements using the nth-child selector in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Using external scripts that require access to the DOM and window object within a Javascript/Node.js Azure Function: Best practices

Updating website content dynamically using AJAX and URL manipulation without refreshing the page (Node.js)

"Is there a virtual keyboard available that supports multiple inputs and automatically switches to the next input when the maximum length

The functionality of Javascript is being compromised when utilizing ng-repeat

Utilizing the map function to display elements from a sub array

Display: Show view once forEach loop finishes execution

Dynamic Menu Navigation (No Bootstrap Required)

An example of using quotes within quotes is an HTML tag embedded within JavaScript code

Attempting to transmit a dynamic array of promises from Angular to an Express server

Strings that automatically adjust to fit the content from a JSON object

Utilizing JavaScript AJAX to upload a dynamically generated PDF file to a specific directory on the server

Prevent a sliding panel from responding if there is no input text by incorporating jQuery

Error message encountered in Rails Webpacker: "Uncaught TypeError: $(...).tooltip is not recognized as a function

Once the PostgreSQL container is stopped with docker-compose down, the previously used port becomes unavailable for use again

What is the best way to expand the header, content, and footer colors to cover the entire width of a page while keeping everything centered within a fixed width

"Simultaneously creating a Firebase user account and populating the database with user

Using AJAX along with the append method to dynamically add identical HTML content multiple times to a single element

Failure of window marker to trigger click event in jquery-bing-maps

Unable to access parameters from Pug template when using onclick event

The data display in MUI-Datatable is experiencing an issue where it is unable to read properties of undefined, specifically when trying to split the data