javascript - 如何在 jquery $.each 调用中循环列表项

标签 javascript jquery ajax

我正在使用这个 AJAX success 函数,使用 $.each 方法循环遍历数据来为每个列表创建标题、div 和外部 ul 标签,但我似乎不知道如何循环和创建当我已经循环创建列表项的容器时列出项目。这是我当前正在使用的代码,

$(function() {
    var $accordion= $("#accordion");
     $.ajax({
        type:'GET',
        url: "PDOconnect.php",
        dataType: "json",
        success: function(data){
            $.each(data, function(i,data){
                $accordion.append('<p>'+ data.name + '</p>');
                $accordion.append('<div id='+data.name+'><ul></ul></div>');
            });
        },
        error: function(xhr, textStatus, errorThrown) {
            alert( "Request failed: " + textStatus );
        }
    });// end ajax 
});

我知道 $.each 已经是一种迭代方法,但是如果目标是在迭代中创建另一个迭代怎么办? 如何在循环中创建循环?

假设所需的输出是,

         <div id="accordion">
            <p> Electrition</p>
            <div>
            <ul>
              <li>jon</li>
              <li>jill</li>         
           </ul>
           </div>

            <p>Engineer</p>
           <div>
            <ul>
              <li>jerry</li>
              <li>laura</li>
           </ul>
          </div>
          </div>

并且您可以像这样从服务器获取 stdclass 对象,

       array( 
           [1] => stdClass Object
                (
                [id] => 3
                [title] => Electrition
                [img] => 
                [description] => 
                [school] => 
                [location] => 1
                [url] => 
                [tablename] => 3
                [votes] => 0
                [name] => John Doe
                [NumJobsdone] => 4
                  )

               [2] => stdClass Object
                    (
                    [id] => 2
                    [title] => Electrition
                    [img] => 
                    [description] => 
                    [school] => 
                    [location] => 1
                    [url] => 
                    [tablename] => 2
                    [votes] => 0
                    [name] => Tico Marinez
                    [NumJobsdone] => 6
                      )

             [3] => stdClass Object
                   (
                    [id] => 2
                    [title] => Engineer
                    [img] => 
                    [description] => 
                    [school] => 
                    [location] => 1
                    [url] => 
                    [tablename] => 2
                    [votes] => 0
                    [name] => Jerry Smity
                    [NumJobsdone] => 6
                       )

                [4] => stdClass Object
                     (
                      [id] => 2
                      [title] => Engineer
                      [img] => 
                      [description] => 
                      [school] => 
                      [location] => 1
                      [url] => 
                      [tablename] => 2
                      [votes] => 0
                      [name] => Laura Bastian
                      [NumJobsdone] => 6
                       )
                       ) 

最佳答案

您可能正在寻找$.map()

它允许您返回您指定的任何内容的数组。

$("#parnet")
    .append($.map(data, function(el) {
        return $("<div>")
            .append(....)
        ;}
    ));

这种链接使得 jquery 如此强大。您可以以这种方式无限期地嵌套循环,这就是我如何在没有模板的情况下轻松制作表格等

关于javascript - 如何在 jquery $.each 调用中循环列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31033298/

相关文章:

javascript - Angular Bootstrap 单选按钮不触发功能

javascript - 我的脚本使浏览器崩溃

jquery - IE7 中的 Z-INDEX 问题

javascript - 从选定列表中而不是从 dom 中删除元素

javascript - 如何每隔一个项目添加一个带有类的div

javascript - 从 Rails 3 中的 Controller 方法或助手获取数据到 ajax

php - 尝试获取项目 id 以与 ajax 一起使用

javascript - 我该如何解决这个 pm2 日志错误?

javascript - Phonegap AJAX 请求未定义

javascript - 通过父类名获取属性值