javascript - jquery 中的 for 循环 <p> 标签

Question

我需要使用 jQuery 循环。有时我的查询返回不止一行，所以我想检查查询是否返回不止一行。我想查看 p 中的所有输出标签(一一)。我编写了代码，它只给出了查询中的最后一行。如何返回 <p> 中的所有行标签？我的代码有什么错误？

 <p id="prodDeccarea"> </p> 

$("#slsNo").keyup(function () {
    $("#hsCode").val(null);
    $("#slsiUnit").val(null);
    var slsNo = $("#slsNo").val();
    $.ajax({
        type: 'GET',
        url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
        success: function (result) {
            var jString = JSON.stringify(result);
            var jdata = JSON.parse(jString);
            for (var x = 0; x < jdata.length; x++) {
                if (1 < jdata.length) {
                    var td1 = jdata[x].itemDesc;
                    var td2 = jdata[x].hsCode;
                    var td3 = jdata[x].slsiUnit;
                    $("#prodDeccarea").html("Your product catagory is " + jdata[x].itemDesc + ".");

                } else {
                    var td1 = jdata[x].itemDesc;
                    var td2 = jdata[x].hsCode;
                    var td3 = jdata[x].slsiUnit;
                    $("#hsCode").val(td2);
                    $("#prodDeccarea").html("Your product catagory is " + td1 + ".");
                    if (td3 == "1") {
                        $("#slsiUnit").val("UNIT1");
                    }
                    if (td3 == "2") {
                        $("#slsiUnit").val("UNIT2");
                    }
                    if (td3 == "3") {
                        $("#slsiUnit").val("UNIT3");
                    }
                    if (td3 == "4") {
                        $("#slsiUnit").val("UNIT4");
                    }
                    if (td3 == "5") {
                        $("#slsiUnit").val("UNIT5");
                    }
                    if (td3 == "6") {
                        $("#slsiUnit").val("UNIT6");
                    }
                }
            }
        }
    }
    );
});

Answer 1

您的代码存在一些问题

让我们分析一下:-)

当 for 循环 中数组 jdata 的长度 === 1 时，您使用了一个条件。将该逻辑从 for 循环 移出。

for (var x = 0; x < jdata.length; x++) {
    if (1 < jdata.length) { 
    ^

您将覆盖之前调用函数 .html(...) 的内容。因此，您将丢失以前的 HTML。

$("#prodDeccarea").html("Your product catagory is " + td1 + ".");
                       ^

您正在对一个已经存在的 JSON 字符串进行字符串化，只需解析它即可。

var jString = JSON.stringify(result);
                   ^

您有多个条件可以根据 tdr3 的值设置值。只需使用该值并将其设置为元素即可。即:$("#slsiUnit").val("UNIT"+ td3);

if (td3 == "1") { <- Here
    $("#slsiUnit").val("UNIT1");
} 
if (td3 == "2") { <- Here, and so on
    $("#slsiUnit").val("UNIT2");
}

查看包含这些修复的代码片段

$("#slsNo").keyup(function() {
  $("#hsCode").val(null);
  $("#slsiUnit").val(null);
  var slsNo = $("#slsNo").val();
  $.ajax({
    type: 'GET',
    url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
    success: function(result) {
      var jString = JSON.stringify(result);
      var jdata = JSON.parse(jString);

      if (jdata.length === 1) {
        var td1 = jdata[0].itemDesc;
        var td2 = jdata[0].hsCode;
        var td3 = jdata[0].slsiUnit;
        $("#hsCode").val(td2);
        $("#prodDeccarea").html("Your product catagory is " + td1 + ".");
        $("#slsiUnit").val("UNIT" + td3);
        
        return;
      }

      for (var x = 0; x < jdata.length; x++) {
        var td1 = jdata[x].itemDesc;
        var td2 = jdata[x].hsCode;
        var td3 = jdata[x].slsiUnit;
        var $prodDeccarea = $("#prodDeccarea");
        $prodDeccarea.html($prodDeccarea.html() + '<p>' + "Your product catagory is " + jdata[x].itemDesc + "." + "</p>");
      }
    }
  });
});