Senden von IDs von DIV-Elementen in einem AJAX-Aufruf

Question

Ich richte ein relativ einfaches Benachrichtigungssystem für meine Laravel-Anwendung ein und bin so weit gekommen, Benachrichtigungen zu generieren und anzuzeigen.

Ich bin jetzt durch die Bewegung der Gebäude Funktionalität, um die Anzahl der Benachrichtigungen zu löschen und haben es geschafft, dies mit einigen jQuery tun. Ich muss dies weiter vorantreiben, um die IDs aller angezeigten Benachrichtigungen zu erfassen, damit ich sie in einem AJAX-Anruf senden kann, damit ich sie als in der Datenbank gesehen markieren kann.

Als eine sehr einfache Kopie und Paste, habe ich eine JSFiddle der Funktionalität erstellt. Durch sie meine CSS-Dateien und Ressourcen fehlt es nicht oder ganz wie es ...

In der Geige hat an meinem Ende aussehen funktioniert, hat die Benachrichtigung ein id, die mit notification-id-X beginnt, wo X die ID der ist Benachrichtigung angezeigt und ein data-id Attribut zeigt das gleiche (ich bin mir nicht sicher, ob dies überhaupt benötigt wird).

Aus meiner Suche scheint es, wie ich so etwas wie die unten verwenden möchte mit notification-id- für all id s Anfang zu suchen:

var notifications = $('[id^="notification-id-"]'); 

Ich kann einfach nicht herausfinden, was mit dem notifications Objekt zu tun, nachdem Ich habe dies getan, um alle IDs zu erhalten, die ich gefunden habe, und sie in einem AJAX-Aufruf zu senden, wo meine Laravel-Anwendung sie lesen kann.

Answer 1

Was aus notifications geworden ist, ist ein jQuery-Objekt, das alle Elemente enthält, die mit diesem Selektor übereinstimmen. Einfach Schleife diese Elemente durch und ein Array zu speichern ihre IDs erstellen:

var notifications = $('[id^="notification-id-"]').map(function() { 
    return this.id.slice(16); 
}).get(); 

Dieses Sie ein Array erhalten die IDs in der Variablen notifications enthält.

sie von AJAX senden:

$.ajax({ 
    url: "my_server_script.php", 
    method: "POST" // Or whatever you're using (GET, PUT, etc.) 
    data: notifications // Let jQuery handle packing the data for you 
    success: function(response) { 
     // The data was sent successfully and the server has responded (may have failed server side) 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
     // AJAX (sending data) failed 
    }, 
    complete: function() { 
     // Runs at the end (after success or error) and always runs 
    } 
});