附加到具有特定类的每个元素

Question

我有一个如下所示的 jQuery 脚本。假设获得 AWS ML 预测并比较分数，并根据分数附加到表中的单元格中正确的预测。所有这些单元格都具有相同的类prediction。单击按钮并触发此脚本时，它会正确执行所有操作，但是当它到达附加部分时，会抛出错误消息Cannot read property 'append' of undefined。

当我在 chrome 控制台中运行相同的脚本时，它会正确附加到正确的位置。我不确定为什么会这样。

    $(document).ready(function(){
        var highPred="";
        $("#predict").click(function(){
        var predictionTables = $(".prediction");
            for (var i = 0; i < 4; i++) {
                var predictedScoresAWS=[];
                var params = {
                  Record: myData[i]
                };
                machinelearning.predict(params, function(err, data) {
                  if (err){
                    console.log(err, err.stack); // an error occurred
                  } else{
                    console.log(data);           // successful response
                    // data = $.parseJSON(data);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Reduce purge history day count']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Increase the java heap space']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Successful run']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Other error']);
                    console.log(predictedScoresAWS)
                    var highPredIndex = predictedScoresAWS.indexOf(Math.max(...predictedScoresAWS))
                    switch(highPredIndex){
                        case 0:
                            highPred='Reduce purge history day count';
                            break;
                        case 1:
                            highPred='Increase the java heap space';
                            break;
                        case 2:
                            highPred='Successful run';
                            break;
                        case 3:
                            highPred='Other error';
                    }
                    console.log(highPred);
                    console.log(predictionTables);
                    console.log(predictionTables[i])
                    while (predictedScoresAWS.length) { predictedScoresAWS.pop(); }
                    predictionTables[i.].append(highPred);
                    }
                });
            }
        });
    });

Answer 1

当您将下标与 jQuery 集合一起使用时，它会返回 DOM 对象，而不是 jQuery 对象。您应该使用.eq() 来获取jQuery 对象，然后您可以调用jQuery 的append() 方法。

predictionTables[i].append(highPred);

应该是：

predictionTables.eq(i).append(highPred);

另一个问题是您试图在异步回调中使用迭代变量i。有关此问题和许多解决方案的问题，请参见 JavaScript closure inside loops – simple practical example 和 Javascript infamous Loop issue?。如果可以使用 ES6，只需将 var i = 0 更改为 let i = 0。