Utilisation de sélecteurs jQuery pour trouver tous les identifiants qui se terminent d'une certaine façon

Question

J'ajoute une ligne à l'aide de la fonction clone() et je dois ensuite renommer toutes les divisions de la nouvelle ligne clonée. J'ai essayé de le faire de cette façon :

// Add button for new TOEFL entry
        $("#add-TOEFL").button().click(function( event ){
                event.preventDefault();

                var tag = 'TOEFL',
                    testDate = $("#TOEFLtestDate-0").val(),
                    reading = $("#readingTOEFLScore-0").val(),
                    listening = $("#listeningTOEFLScore-0").val(),
                    speaking = $("#speakingTOEFLScore-0").val(),
                    writing = $("#writingTOEFLScore-0").val(),
                    applicantId = $("#applicantId").val(),
                    dataString = 'applicantId=' + applicantId + '&dateTaken=' + testDate + '&listeningScore=' + listening + '&readingScore=' + reading + '&speakingScore=' + speaking + '&writingScore=' + writing;

                // Insert New Record
                $.ajax({
                    type: "POST",
                    url: "ajax/insertEntry.cfm?xAction=TOEFL",
                    data: dataString,
                    success: function(newIdx){

                        // Make sure returned value is a number
                        newId = jQuery.trim(newIdx) \* 1;

                        // clone new row
                        newDivId = tag + '-Entry-' + newId;
                        newRow = $('#' + tag + '-Entry-0').clone().attr('id', newDivId);
                        console.log('New row cloned. DivId: ' + newDivId);

                        // get all ids
                        $("#" + newDivId).find("\[@id$='-0'\]").each(function(){
                            selectedDivId = $(this).attr("id");
                            alert(selectedDivId);   
                        })  

                    }
                })

Voici le balisage HTML :

<div id="TOEFL-Entry-0" style="display: none" >          
        <p style="margin:5px 0 0 0">
            Taken  <input name="TOEFLtestDate-0" type="text" id="TOEFLtestDate-0" class="inputDateField" style="margin-left:5px; margin-right:15px;"/>
            Reading <input name="readingTOEFLScore-0" type="text" id="readingTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            Listening <input name="listeningTOEFLScore-0" type="text" id="listeningTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            Speaking <input name="speakingTOEFLScore-0" type="text" id="speakingTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            Writing <input name="writingTOEFLScore-0" type="text" id="writingTOEFLScore-0" class="inputTinyScoreField" style="margin:0 8px 0 5px"/>
            <button id="add-TOEFL-0">Add</button>
        </p>
    </form>
</div>

Même s'il devrait y avoir un tas d'identifiants correspondant à ce critère, je ne vois pas l'alerte.

Qu'est-ce que je fais de mal ?

Josh

Answer 1

Mise à jour pour le nouveau code de question.

Il y a deux problèmes :

1. Le code OP récemment mis à jour a [@id$='-0'] -- ce qui n'était pas le cas dans la question initiale. Pour les versions actuelles de jQuery, cela devrait être [id$='-0'] .

2. Les noeuds sont clonés mais jamais ajoutés au DOM. Utilisez quelque chose comme :

   var Entry0  = $('#' + tag + '-Entry-0');
   var newRow  = Entry0.clone().attr('id', newDivId);
   //console.log ('New row cloned. DivId: ' + newDivId);
   
   Entry0.parent ().append (newRow);

   avant d'essayer d'obtenir les identifiants.

---

Il n'y a aucun problème avec le code que vous avez posté. Le problème est dans quelque chose que vous ne nous avez pas encore montré.

Affichez votre HTML et le JavaScript COMPLET. Idéalement, postez un échantillon minimal, mais complet, qui reproduit le problème.

Answer 2

Merci pour toute l'aide apportée.

Le problème était en fait que la ligne clonée n'était pas encore affichée et devait être référencée comme 'newRow' au lieu de $("#" + newDivId).

Une fois que j'ai changé ça, ça marche comme un champion.

Je ne sais pas vraiment pourquoi c'est le cas, mais c'est encore pire.