When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

Question

When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

I have a loop that creates multiple divs with the class panel.

@for(comment <- event.getCommentsSorted()) {

However, when I try to manipulate each of these divs using jQuery's .each, only the first two divs are selected.

$(window).on('load', function() {
        $(".panel").each(function (index) {
            alert(index);
            $(this).height($(this)[index].scrollHeight - 12);
        });
    });

The remaining three divs seem to be missing.

https://i.sstatic.net/hpLmq.png

I initially thought it could be due to the script executing before all divs are created, but since I'm using load, it should run after the page has fully loaded. I've also tried utilizing .ready and varying the number of generated divs, but I still only target the first two elements.

Why am I only able to select the first two elements, and is there a way to target all elements?

jquery html css playframework

Answer 1

Answer №1

To improve performance, consider wrapping the .each method within a setTimeout function as shown below:

$(window).on('load', function() {
  setTimeout(function() {
    $(".panel").each(function (index) {
      alert(index);
      $(this).height($(this)[index].scrollHeight - 12);
    });
  }, 3000); // Execute after a delay of 3 seconds
});

Answer 2

To improve performance, consider wrapping the .each method within a setTimeout function as shown below:

$(window).on('load', function() {
  setTimeout(function() {
    $(".panel").each(function (index) {
      alert(index);
      $(this).height($(this)[index].scrollHeight - 12);
    });
  }, 3000); // Execute after a delay of 3 seconds
});

Answer 3

Answer №2

After searching for a solution, I finally found it!

$(this).height($(this)[index].scrollHeight

wasn't getting the job done like I expected.

For some reason unknown to me, switching to this code made everything work perfectly:

$(".panel .inputSizeLimitation").each(function () {
       $(this).height($(this).prop("scrollHeight") - 12);
    });

Answer 4

After searching for a solution, I finally found it!

$(this).height($(this)[index].scrollHeight

wasn't getting the job done like I expected.

For some reason unknown to me, switching to this code made everything work perfectly:

$(".panel .inputSizeLimitation").each(function () {
       $(this).height($(this).prop("scrollHeight") - 12);
    });

When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

Answer №1

Answer №2

Similar questions

Is there a method to obtain the compiled CSS for an Angular 2+ component?

Issues with AngularJS Opening the Datepicker upon Click

Is it possible to dynamically change the color of a box shadow using an event handler?

Trigger an event in JQuery when a selector changes

Using jQuery within MediaWiki pages beyond just Monobook.js or extensions is a powerful tool

Ways to subtly adjust the edges of text in a design

Using AJAX for fetching and saving an object into a variable

When an option is selected, the CSS class associated with that option is removed

Identifying the block on the screen using Jquery as you scroll

Leveraging the Scroll feature in Bootstrap for smooth scrolling

The issue of sum calculation not functioning properly when manually inputting values in jQuery

Issue in Opera with the $(window).load(function(){}); script

The Bootstrap 5 class "col-md-4" seems to be malfunctioning

Issues with refreshing Datatables functionality

Error: The variable $ is not recognized during the import process

Mastering the Art of Scrolling

Header reference differs from the document referrer

How can CSS files be shared among multiple projects within Visual Studio 2012?

What sets justify-content apart from align-items?

Validating SASS based on class name