jQuery-在现有的each（）事件中嵌套另一个each（）循环不起作用

问题描述 投票：0回答：1

[我正在尝试从具有多个选项的JSON数据创建表，在此拆分数据并使用.each（）遍历每个选项。

下面是我正在使用的JSON数据：

var StatJSON = {
        "Volvo": {
            "Options": "Option1-Black,car/Option2-Blue,car&bus"
        },
        "Mercedes": {
            "Options": "Option1-Blue,car/Option2-Blue,car&bus"
        },
    };

我面临的挑战是，我需要在每个'Option'内创建另一个循环，以使用'＆'作为分隔符来选择每个'车辆类型'（即JSON以上的汽车，公交车）。我用来遍历数据的jQuery如下所示（下面的针对relavent语句的注释）：

jQuery('.divResult table tbody tr td').each(function ($) {
    if (jQuery(this).text() == 'Options') jQuery(this).nextAll("td").each(function () {
        var data = jQuery(this).text();
        var Options = data.split('/');

        function HowToReach(data) {
            var html = '<table class="InnerTable">';
            jQuery.each(Options, function(index, value){
                var OptionNumber = value.split('-')[0];
                var OptionData = value.split('-')[1];
                var OptionColor = OptionData.split(',')[0];
                var OptionTransport = OptionData.split(',')[1];
                var OptionTransportArray = OptionTransport.split('&'); // <-- Splitting the transport options

                for (i=0; i<OptionTransportArray.length; i++){
                  var OptionTransportEach = OptionTransport.split('&')[i]; // <-- Looping the options
                }

                html += '<tr><td colspan="2">'+ OptionNumber +'</td></tr>'
                html += '<tr><td>Color:'+ OptionColor +'</td>'
                html += '<td><span class="fas fa-'+OptionTransportEach+'"></span></td></tr>' //  <-- Adding each option  
            });
            html += '</table>'
            return html;
        }
        jQuery(this).empty().append(HowToReach(data));
    });
 });

[不幸的是，它没有遍历这两个元素，而仅显示数组中的第n个元素，即在“ Option2”的情况下仅显示“公共汽车”，而不在“汽车”的情况下显示。

enter image description here

[我要去哪里了，如何纠正我的代码以确保循环遍历并显示每个以'＆'符号分隔的元素。

下面是整个工作代码：

jQuery(document).ready(function($) {

  var StatJSON = {
    "Volvo": {
      "Options": "Option1-Black,car/Option2-Blue,car&bus"
    },
    "Mercedes": {
      "Options": "Option1-Blue,car/Option2-Blue,car&bus"
    },
  };

  jQuery('#btnSubmit').click(function() {
    var data = [];
    jQuery("#selection").find(':selected').each(function(e) {
      var this_input = jQuery(this);
      if (this_input.is(':selected')) {
        data.push(this_input.val());
      }
    });

    $('#divResult').empty().append(PrintTable(data));

    jQuery('.divResult table tbody tr td').each(function($) {
      if (jQuery(this).text() == 'Options') jQuery(this).nextAll("td").each(function() {
        var data = jQuery(this).text();
        var Options = data.split('/');

        function HowToReach(data) {
          var html = '<table class="InnerTable">';
          jQuery.each(Options, function(index, value) {
            var OptionNumber = value.split('-')[0];
            var OptionData = value.split('-')[1];
            var OptionColor = OptionData.split(',')[0];
            var OptionTransport = OptionData.split(',')[1];
            var OptionTransportArray = OptionTransport.split('&');

            for (i = 0; i < OptionTransportArray.length; i++) {
              var OptionTransportEach = OptionTransport.split('&')[i];
            }

            html += '<tr><td colspan="2">' + OptionNumber + '</td></tr>'
            html += '<tr><td>Color:' + OptionColor + '</td>'
            html += '<td><span class="fas fa-' + OptionTransportEach + '"></span></td></tr>'
          });
          html += '</table>'
          return html;
        }
        jQuery(this).empty().append(HowToReach(data));
      });
    });

    function PrintTable(data) {
      var html = '<table class="compTable"><thead><tr><th>';
      if (data && data.length) {
        html += '</th>';
        jQuery.each(data, function(k, v) {
          html += '<th id="myHeader" class="header2">' + v + '</th>';
        });
        html += '</tr>';
        html += '<tbody>';
        jQuery.each(StatJSON[data[0]], function(k, v) {
          html += '<tr><td>' + k + '</td>';
          jQuery.each(data, function(k2, v2) {
            html += '<td>' + StatJSON[data[k2]][k] + '</td>';
          });
          html += '</tr>';
        });
      } else {
        html += 'No results found</td></tr>';
      }
      html += '</tbody></table>';
      return html;
    }


  });

});
body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.divResult {
  overflow: scroll;
  position: relative;
}

.compTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

.InnerTable {
  margin: 1px;
  border: 1px solid #222;
  text-align: center;
}
<html>

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='https://kit.fontawesome.com/a076d05399.js'></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/brands.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/regular.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>

<select id="selection" multiple="multiple">
  <option value="Volvo">Volvo</option>
  <option value="Mercedes">Mercedes</option>
  <br />
  <input id="btnSubmit" class="button" type="submit" value="submit" />
</select>
<br /><br />
<div id="divResult" class="divResult"></div>
jquery arrays foreach each
1个回答
0
投票

您需要向下移动循环并根据其构建html

jQuery(document).ready(function($) {

  var StatJSON = {
    "Volvo": {
      "Options": "Option1-Black,car/Option2-Blue,car&bus"
    },
    "Mercedes": {
      "Options": "Option1-Blue,car/Option2-Blue,car&bus"
    },
  };

  jQuery('#btnSubmit').click(function() {
    var data = [];
    jQuery("#selection").find(':selected').each(function(e) {
      var this_input = jQuery(this);
      if (this_input.is(':selected')) {
        data.push(this_input.val());
      }
    });

    $('#divResult').empty().append(PrintTable(data));

    jQuery('.divResult table tbody tr td').each(function($) {
      if (jQuery(this).text() == 'Options') jQuery(this).nextAll("td").each(function() {
        var data = jQuery(this).text();
        var Options = data.split('/');

        function HowToReach(data) {
          var html = '<table class="InnerTable">';
          jQuery.each(Options, function(index, value) {
            var OptionNumber = value.split('-')[0];
            var OptionData = value.split('-')[1];
            var OptionColor = OptionData.split(',')[0];
            var OptionTransport = OptionData.split(',')[1];
            var OptionTransportArray = OptionTransport.split('&');
            console.log(OptionTransportArray);
            

            html += '<tr><td colspan="2">' + OptionNumber + '</td></tr>'
            html += '<tr><td>Color:' + OptionColor + '</td>'
            html += '<td>'
            for (i = 0; i < OptionTransportArray.length; i++) {
              html+= '<span class="fas fa-' + OptionTransport.split('&')[i] + '"></span>'
              }
            html+='</td></tr>';
          });
          html += '</table>'
          return html;
        }
        jQuery(this).empty().append(HowToReach(data));
      });
    });

    function PrintTable(data) {
      var html = '<table class="compTable"><thead><tr><th>';
      if (data && data.length) {
        html += '</th>';
        jQuery.each(data, function(k, v) {
          html += '<th id="myHeader" class="header2">' + v + '</th>';
        });
        html += '</tr>';
        html += '<tbody>';
        jQuery.each(StatJSON[data[0]], function(k, v) {
          html += '<tr><td>' + k + '</td>';
          jQuery.each(data, function(k2, v2) {
            html += '<td>' + StatJSON[data[k2]][k] + '</td>';
          });
          html += '</tr>';
        });
      } else {
        html += 'No results found</td></tr>';
      }
      html += '</tbody></table>';
      return html;
    }


  });

});
body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.divResult {
  overflow: scroll;
  position: relative;
}

.compTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

.InnerTable {
  margin: 1px;
  border: 1px solid #222;
  text-align: center;
}
<html>

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='https://kit.fontawesome.com/a076d05399.js'></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/brands.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/regular.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>

<select id="selection" multiple="multiple">
  <option value="Volvo">Volvo</option>
  <option value="Mercedes">Mercedes</option>
  <br />
  <input id="btnSubmit" class="button" type="submit" value="submit" />
</select>
<br /><br />
<div id="divResult" class="divResult"></div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.