Versuch, den Wert desselben Selektors in zwei Iterationen zu alarmieren, wobei der korrekte Wert in der ersten Iteration und der falsche Wert in der Sekunde erhalten wird. Warum?

Question

JSFiddle here.

Im folgenden SSCCE gibt es zwei .inner-table Elemente. Ich habe JQuery each() verwendet, um durch sie zu iterieren. Dann innerhalb jedes , ich Iterate durch jede <tr>, um herauszufinden, und den Wert des Elements <input>.color-name, indem Sie val() Funktion.

Das Problem ist, dass in der ersten Iteration der Alarm zeigt Wert von <input>.color-name korrekten Wert zeigt, dass ich in das Textfeld eingegeben, aber in der zweiten Iteration (dh für die zweiten inner-table), scheint die Warnung ein zeigen, leere Zeichenfolge, egal was ich in das Textfeld schreibe.

Die Frage ist warum? Was mache ich falsch?

$(document).on("click", "#button", function(event) { 
 
    //event.preventDefault(); 
 
    alert('Button clicked.'); //check 
 
    var colorName; 
 
    var dataJSON = {}; 
 

 
    $(".inner-table").each(function() { 
 
    var dataUnit = []; 
 
    dataJSON.dataUnit = dataUnit; 
 
    var iterationCount = 1; 
 
    
 
    $(this).find("tbody tr").each(function() { 
 
     alert("Iteration " + iterationCount); //check 
 
     //alert($(this).html());//check 
 
     if ($(this).find("td .color-name").length) { 
 
     colorName = $(this).find("td .color-name").val(); 
 
     alert(colorName); //check 
 
     } 
 
     iterationCount++; 
 
    }); 
 

 
    var color = { 
 
     "colorName": colorName 
 
    }; 
 

 
    dataJSON.dataUnit.push(color); 
 
    }); 
 

 
    console.log("dataJSON > " + JSON.stringify(dataJSON)); //check 
 
});

.outer-table tr { 
 
    margin: 30px; 
 
} 
 
.inner-table { 
 
    border: 2px solid yellow; 
 
    background-color: wheat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button"> 
 
    Click 
 
</button> 
 
<table class="outer-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <table class="inner-table"> 
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
       <p class="input-label">Name of Color</p> 
 
       <input class="input-field color-name" type="text" /> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    <!-- ------------------------------------------------- --> 
 
    <!-- ------------------------------------------------- --> 
 
    <!-- ------------------------------------------------- --> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <table class="inner-table"> 
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
       <p class="input-label">Name of Color</p> 
 
       <input class="input-field colorName" type="text" /> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Sie verwenden einen falschen Klassennamen in der zweiten td. Sie verwenden "colorName", es sollte "color-name"

sein

Answer 2

Sie sollten hier mehr auf dem each API lesen: http://api.jquery.com/jQuery.each/. Sie sollten Ihre Callback-Funktion ändern, um Parameter zu akzeptieren, die die Iterationsvariable enthalten, statt Ihre eigenen zu deklarieren. Ich denke, das ist der Anfang Ihrer Lösung. In der Jsfiddle scheint die Iteratorvariable niemals in den aufgetauchten Alerts voranzuschreiten.