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.

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

Guide to integrating react-phone-number-input into material-ui TextField

Tips for avoiding divs from overlapping when the window size is modified

When HTML elements are dynamically inserted through JavaScript using quilljs, they may cause conflicts with the layout properties

How to Break Free from JQuery AJAX Result while Preserving its True Worth

An issue has occurred: TypeError - It is impossible to access the 'forEach' property of an undefined object

Creating a dynamic 3D pie chart with Highcharts and JSON data

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Total Output Calculation

Extract the price value from the span element, then multiply it by a certain number before adding it to a div element

Fetching data from multiple tables in CodeIgniter using PHP and jQuery and returning it asynchronously with Ajax

Elevate the opacity with a hover effect

When a table row is selected, set the OnClick attribute of an input to the value of the TD cell in that row based on

Facebook and the act of liking go hand in hand, growing together

Preventing Bootstrap modal from automatically closing in Laravel 5.1 when authentication fails

Tips for retrieving a collection of nodes using a specific CSS selector in jQuery

Error code 302 is triggered when attempting to retrieve an HTML file from a web address

Guide to verifying a value within a JSON object in Ionic 2

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

JavaScript code that displays items in a shopping cart

The Django form returns as not valid during an AJAX request as form.is_valide() is False