Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

Question

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

After sending AJAX requests and receiving HTML with multiple div elements (.card), I am using .append to add new .card elements after each request, creating an infinite scroll effect. However, I am facing issues when trying to use .each to iterate over all .card elements on the page after one, two, three, etc. AJAX requests.

$( document ).ready(function() {
$('.card').each(function(i) {
   addMarker(i);
}
});

and

$( document ).ajaxComplete(function() {
$('.card').each(function(i) {
   addMarker(i);
}
});

This approach is not functioning as expected.

With each AJAX request, I am observing that the count begins from zero on the new .card divs.

javascript jquery html css ajax

Answer 1

Answer №1

If you are working with a scenario where you have a container element

<div class="container"></div>

and appending cards within it using

<div class="card"></div>

, then the script below would be appropriate:

$(document).scroll(function(){
    $.ajax({
        method: "GET",
        url: "file.php",
        success: function(data){
            data = $.parseHTML(data);
            $.each( data, function( i, el ) {
                if (el.className == 'card') {
                    $(el).appendTo('.container');
                };
            });

            $('.card').each(function(i) {
                addMarker(i);
            });
        }
    });
});

Answer 2

If you are working with a scenario where you have a container element

<div class="container"></div>

and appending cards within it using

<div class="card"></div>

, then the script below would be appropriate:

$(document).scroll(function(){
    $.ajax({
        method: "GET",
        url: "file.php",
        success: function(data){
            data = $.parseHTML(data);
            $.each( data, function( i, el ) {
                if (el.className == 'card') {
                    $(el).appendTo('.container');
                };
            });

            $('.card').each(function(i) {
                addMarker(i);
            });
        }
    });
});

Answer 3

Answer №2

Give my method a shot, it might be just what you need.

$(function(){
$.ajax({
    method: "GET",
    url: "information.action",
    success: function(response){
        $(response).find(".item").each(function(index, object){
                $(".container").append(object);
        });
        $('.item').each(function(idx) {
            addMarker(idx);
        });
    }
  });
});

Answer 4

Give my method a shot, it might be just what you need.

$(function(){
$.ajax({
    method: "GET",
    url: "information.action",
    success: function(response){
        $(response).find(".item").each(function(index, object){
                $(".container").append(object);
        });
        $('.item').each(function(idx) {
            addMarker(idx);
        });
    }
  });
});

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

Answer №1

Answer №2

Similar questions

How can Jquery be used to target elements that have certain value(s) in their data attribute array?

Challenge with form validation

In my VueJs project, I developed a custom button component that includes a loader feature. I initially passed the loader as a prop, but I am currently facing challenges integrating it with a method in another VueJs page

In Vue2, you can utilize $ref to retrieve information from a child component and transfer it into the parent component's data

What is the method for storing API status JSON in the state?

Retrieve information from a JSON file containing multiple JSON objects for viewing purposes

The close button on my modal isn't functioning properly

Prevent the countdown timer from resetting every time I refresh the page

Creating a new list by grouping elements from an existing list

Having trouble integrating the css and js animation files into my Django project

Personalized jQuery mask customization

Elements from Firebase failing to appear in Angular Grid

Deliver an index.html file upon server creation

Unsubscribing from a service method in Javascript using RxJS

What is the hexadecimal color code for a specific element's background?

Vue Quasar Drawer Layout with Bottom Bar

Avoiding special characters in URLs

What is the process for retrieving the address of the connected wallet using web3modal?

Are max-width:auto and max-width:100% the same thing?

Showcasing a variety of products on a single webpage in Magento