jQuery - Get ID von einem Objekt, führen AJAX-Aufruf, nächste ID, wiederholen

Question

Ich habe eine Auswahlliste, die mit IDs aus einer Datenbank gefüllt ist. Wie kann ich jQuery jede dieser IDs nacheinander ausführen lassen, dann eine AJAX-Funktion ausführen und diese Ergebnisse nach dem entsprechenden Objekt anhängen?

Ich weiß, wie man den AJAX-Aufruf macht und das Anhängen nach dem Objekt, aber was ich nicht herausfinden kann, ist, wie man eine ID bekommt, den AJAX-Aufruf ausführt, und wenn das erledigt ist, gehe zum nächste ID, und wiederholen, bis keine mehr übrig ist.

Hier ist eine Probe meiner HTML:

<select id="thingsList"> 
 
    <optgroup label="Name1"> 
 
    \t <option id="thing1" class="thingsListID" value="1" disabled="disabled"></option> 
 
    </optgroup> 
 
    <optgroup label="Name2"> 
 
    \t <option id="thing2" class="thingsListID" value="2" disabled="disabled"></option> 
 
    </optgroup> 
 
    <optgroup label="Name3"> 
 
    \t <option id="thing3" class="thingsListID" value="3" disabled="disabled"></option> 
 
    </optgroup> 
 
    <optgroup label="Name4"> 
 
    \t <option id="thing4" class="thingsListID" value="4" disabled="disabled"></option> 
 
    </optgroup> 
 
</select>

Answer 1

einfach die loaddata ändern, um eine Ajax-Anforderung und senden Sie Ihre HTML-Fragment

function loadData(item, callback) { 
 
    
 
    var html = ""; 
 
    
 
    for (var i = 0; i < (Math.random() * 1000) % 15; i++) 
 
    html += "<option>" + (new Date()).toString() + "</option>"; // just for example 
 
    // call you ajax here 
 
    callback(html); 
 
}; 
 

 
$("button").click(function() { 
 
    $("#thingsList").find("optgroup").each(function (i, group) { 
 
    var item = $(group).find("option:first"); 
 
    $(group).find("option").not(item).remove(); // if you need to erase and add again 
 
    loadData(item, function (html) { 
 
     $(html).insertAfter(item); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="thingsList"> 
 
    <optgroup label="Name1"> 
 
    \t <option id="thing1" class="thingsListID" value="1" disabled="disabled"></option> 
 
    </optgroup> 
 
    <optgroup label="Name2"> 
 
    \t <option id="thing2" class="thingsListID" value="2" disabled="disabled"></option> 
 
    </optgroup> 
 
    <optgroup label="Name3"> 
 
    \t <option id="thing3" class="thingsListID" value="3" disabled="disabled"></option> 
 
    </optgroup> 
 
    <optgroup label="Name4"> 
 
    \t <option id="thing4" class="thingsListID" value="4" disabled="disabled"></option> 
 
    </optgroup> 
 
</select> 
 

 
<button>Reload</button>