Question

第一段代码工作正常，但我想知道为什么我的第二段不起作用。我在控制台中没有出现任何错误，但在选择下拉菜单中没有显示任何错误。

作品

var select = $('<select />');
$.each(json, function(grp, lnk) {
  var group = $('<optgroup />', { label:grp });
  $.each(lnk, function(txt, val) {
    $('<option />', { value:val, text:txt }).appendTo(group);
  });
  group.appendTo(select);
});

断

var select = $('<select />').append(function() {
  $.each(json, function(grp, lnk) {
    return $('<optgroup />', { label:grp }).append(function() {
      $.each(lnk, function(txt, val) {
        return $('<option />', { value:val, text:txt });
      });
    });
  });
});

JSON w3.js

var w3BaseUrl = 'http://www.w3schools.com/';

var w3 = {
  'HTML / CSS' : {
    'Learn HTML' : 'html/default.asp',
    'Learn HTML5' : 'html/html5_intro.asp',
    'Learn CSS' : 'css/default.asp',
    'Learn CSS3' : 'css3/default.asp',
  },
  'JavaScript' : {
    'Learn JavaScript' : 'js/default.asp',
    'Learn HTML DOM' : 'htmldom/default.asp',
    'Learn jQuery' : 'jquery/default.asp',
    'Learn AJAX' : 'ajax/default.asp',
    'Learn JSON' : 'json/default.asp',
    'Learn Google Maps' : 'googleAPI/default.asp',
  },
  'Server Side' : {
    'Learn PHP' : 'php/default.asp',
    'Learn SQL' : 'sql/default.asp',
    'Learn ASP' : 'asp/default.asp',
    'Learn ADO' : 'ado/default.asp',
    'Learn VBScript' : 'vbscript/default.asp',
  },
  'ASP.NET' : {
    'Learn ASP.NET' : 'aspnet/default.asp',
    'Learn Web Pages' : 'aspnet/webpages_intro.asp',
    'Learn Razor' : 'aspnet/razor_intro.asp',
    'Learn MVC' : 'aspnet/mvc_intro.asp',
    'Learn Web Forms' : 'aspnet/aspnet_intro.asp',
    'Learn .NET Mobile' : 'dotnetmobile/default.asp',
  },
  'XML Tutorials' : {
    'Learn XML' : 'xml/default.asp',
    'Learn DTD' : 'dtd/default.asp',
    'Learn XML' : 'DOM dom/default.asp',
    'Learn XSLT' : 'xsl/default.asp',
    'Learn XPath' : 'xpath/default.asp',
    'Learn XQuery' : 'xquery/default.asp',
    'Learn XLink' : 'xlink/default.asp',
    'Learn XPointer' : 'xlink/default.asp',
    'Learn Schema' : 'schema/default.asp',
    'Learn XSL-FO' : 'xslfo/default.asp',
    'Learn SVG' : 'svg/default.asp',
  },
  'Web Services' : {
    'Learn Web Services' : 'webservices/default.asp',
    'Learn WSDL' : 'wsdl/default.asp',
    'Learn SOAP' : 'soap/default.asp',
    'Learn RSS' : 'rss/default.asp',
    'Learn RDF' : 'rdf/default.asp',
  },
  'Web Building' : {
    'Web Building' : 'web/default.asp',
    'Web Browsers' : 'browsers/default.asp',
    'Web Certification' : 'cert/default.asp',
    'Web Hosting' : 'hosting/default.asp',
    'Web TCP/IP' : 'tcpip/default.asp',
    'Web W3C' : 'w3c/default.asp',
    'Web Quality' : 'quality/default.asp',
  },
};

Javascript utils.js

function setSelect(selId, json, baseUrl) {
  var select = $('<select />');
  $.each(json, function(grp, lnk) {
    var group = $('<optgroup />', { label:grp });
    $.each(lnk, function(txt, val) {
      $('<option />', { value:val, text:txt }).appendTo(group);
    });
    group.appendTo(select);
  });
  select.change(function() {
    window.open(baseUrl+select.val(),'_blank');
  });
  $(selId).replaceWith(select);
};

function setSelect2(selId, json, baseUrl) {
  var select = $('<select />').append(function() {
    $.each(json, function(grp, lnk) {
      return ($('<optgroup />', { label:grp }).append(function() {
        $.each(lnk, function(txt, val) {
          return $('<option />', { value:val, text:txt });
        )});
      )});
    )});
  });
  select.change(function() {
    window.open(baseUrl+select.val(),'_blank');
  });
  $(selId).replaceWith(select);
}

HTML

<!html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script rel="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script rel="javascript" type="text/javascript" src="utils.js"></script>
    <script rel="javascript" type="text/javascript" src="w3.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        setSelect('#w3', w3, w3BaseUrl);
      });
    </script>
  </head>
  <body>
    <h1>W3Schools</h1>
    <select id="w3"></select>
   </body>
</html>

Answer 1

return回调中的$.each个问号。没有做你认为他们正在做的事情。它们不适用于append方法的回调函数，它们只是在循环中充当continue语句，通过结束该内部fn的当前实例。请参阅示例前面的行$.each的文档。

var select = $('<select />').append(function() {
    var $optGroups = $();
    $.each(json, function(grp, lnk) {
        $optGroups = $optGroups.add(
            $('<optgroup />', { label:grp }).append(function() {
                var $opts = $();
                $.each(lnk, function(txt, val) {
                    $opts = $opts.add(
                        $('<option />', { value:val, text:txt })
                    );
                });
                return $opts;
            })
        );
    });
    return $optGroups;
});

JQuery追加循环回调函数

1 个答案: