Wie füge ich verschiedene IDs unter demselben CLASS-Namen hinzu?

Question

Was ich gerne erreichen würde. Ich habe eine Checkliste in einer Website, und ich möchte eine weitere auf Knopfdruck hinzufügen (ähnlich wie in Trello-Karte). Weil es viel von htlm ist, möchte ich es von der externen HTML-Datei hinzufügen. Aber ich möchte mit jedem Zusatz eine andere ID haben. Jede ID sollte wie ID-Name und Nummer aussehen.

Ich hoffe, es ist klar. Hier

ist der Code:

$('.new-checklist').on('click', function(e){ 
    e.preventDefault(); 
    $.get('new-chk.html',function(data) { 
    $('.checklist').append(data); 
    $('.checklist-all').attr("id", "chk"); 
    }); 
    return false; 
}); 

Answer 1

Sie können die anonyme Funktion zur Verfügung, die attr()-Methode verwenden, um das Attribut zu ändern:

$('.checklist-all').attr("id", function(i){ 
    // 'i' : the index of the current element of 
    // of the collection over which the method 
    // iterates: 

    // here we return the string 'chk' concatenated 
    // with the index: 
    return 'chk' + i; 
}); 

Obwohl die id einstellen ich persönlich prop() verwenden würde es vorziehen, aber es gibt keinen wirklichen Unterschied in der Praxis. Das heißt, aber ich würde Echo Barmar's comment auf die Frage:

Warum brauchen die Checkboxen IDs in erster Linie?

Referenzen:

• attr().

Answer 2

Für das, was Sie zu tun versuchen, sollten Sie einen anderen Selektor wie von Position versuchen, anstatt CLASS, da diese alle Elemente dieser Klasse wählen würde und nicht nur Die, die du willst. Da Sie .append verwenden, um die neue Prüfung hinzuzufügen, dann wissen Sie es das letzte ist, so können Sie dies tun:

$('.checklist').children().last().attr("id", "chk"); 

sollte Ihr Code sein:

$('.new-checklist').on('click', function(e){ 
 
     e.preventDefault(); 
 
     $.get('new-chk.html',function(data) { 
 
     $('.checklist').append(data); 
 
     $('.checklist').children().last().attr("id", "{NEW_ID}"); 
 
     }); 
 
     return false; 
 
    });

Auch Es ist in Ordnung, den HTML-Code in einer externen Datei zu haben, aber Sie sollten ihn nur einmal laden, statt jedes Mal eine Anfrage zu machen, wenn Sie einen neuen Scheck hinzufügen möchten.