个人中心
gpt4 book ai didi

javascript - JQuery追加循环回调函数

转载 作者：行者123 更新时间：2023-11-30 18:08:40 25 4
gpt4 key购买 nike

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

有效

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);
});

splinter 

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>

最佳答案

$.each 回调 fns 中的 return。没有做你认为他们正在做的事情。它们不适用于 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;
});

关于javascript - JQuery追加循环回调函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15168499/

25 4 0
文章推荐： c++ - 如何使用openssl进行base 64解码？
文章推荐： javascript - KineticJS 可拖动图像在拖动后卡住
文章推荐： Javascript Background Color Fade RGB 算法问题
文章推荐： javascript - 切换不适用于显示适用的同一元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com