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

Issues with external javascript link functionality

Field for user input featuring a button to remove the entry

What is the best way to integrate custom JavaScript files into a Vue project?

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

This code snippet results in the property being unrecognized

The jqGrid is not showing the AJAX JSON data as expected

Selecting attribute using a variable in jQuery is a common practice in

Is this filter selector in jQuery correct?

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

Having trouble with ReactJS updating the state in the correct format using moment?

While validating in my Angular application, I encountered an error stating that no index signature with a parameter of type 'string' was found on type 'AbstractControl[]'

React - Error: Unable to access the 'props' property because it is undefined

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

What is the best way to display a multi-state component that includes an API fetch?

Attempting to execute a PHP script through a JavaScript if statement

Wagtail Django TableBlock not showing up properly on the webpage

Alignment problem

Switch out everything except for the initial one

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

The importance of understanding Req.Body in NODE.JS POST Requests