如何以不同于其他数据的方式处理ajax成功数据的第一个值

时间:2016-01-27 01:39:18

标签: javascript jquery json ajax

请考虑以下代码:

'use strict';
$.getJSON('/img/content/galleries/', function(directories) {
    $("#gallery").text("");
    for (var dirnum = 2; dirnum < directories.length - 1; dirnum++) {
        (function(dirnum) {
            var folder = '/img/content/galleries/' + directories[dirnum] + '/';
            $.ajax({
                url: folder,
                success: function(data) {
                        $(data).find("a").attr("href", function(i, val) {
                            if (val.match(/\.jpg|\.png|\.gif/)) {
                                $("#gallery").append('<a class="fancybox-thumb" href="' + folder + val + '" rel="fancybox-thumb"><div class="gallerypictures" style="background-image:url(' + folder + val + ')"></div></a>');
                            } // end val.match
                        }); // end data.find
                    } // end success
            }); // end ajax
        })(dirnum); // end closure
    } // end for loop
}); // end getJSON

它的作用是简单地检索&#34;画廊&#34;的子目录。文件夹,然后通过ajax调用,获取文件名,并按字母顺序输出每个子目录(例如gallery1和gallery2)的内容到#gallery div。

此代码可以正常工作并正确输出所有文件。这就是我所缺少的:

我想为每个子目录处理第一个图像的方式与其他图像不同(我只是想在每个子目录的第一个图像中添加一个类)。

我对这个ajax业务很陌生,所以我对如何过滤每个子目录的第一张图片感到有些困惑。或者也许有一种更容易思考的方法?

提前致谢!

Erick P.

2 个答案:

答案 0 :(得分:0)

在find函数的回调中使用if语句,如:

$(data).find("a").attr("href", function(i, val) {
  if(i === 0){
     // whatever you want to do to first element in here

   } // end val.match
});

答案 1 :(得分:0)

尝试在i循环添加变量for,将i传递给IIFE,使用if条件检查i是否等于0 }

for (var dirnum = 2, i = 0; dirnum < directories.length - 1; dirnum++, i++) {
    (function(dirnum, i) {
        var folder = '/img/content/galleries/' + directories[dirnum] + '/';
        $.ajax({
            url: folder,
            success: function(data) {
                $(data).find("a").attr("href", function(_, val) {
                    if (val.match(/\.jpg|\.png|\.gif/)) {
                        if (i === 0) {
                          // do stuff
                        }
                        $("#gallery").append('<a class="fancybox-thumb" href="' + folder + val + '" rel="fancybox-thumb"><div class="gallerypictures" style="background-image:url(' + folder + val + ')"></div></a>');
                    }
                    // end val.match
                });
                // end data.find
            }// end success
        });
        // end ajax
    })(dirnum, i);
    // end closure
}