jquery 根据class名 赋值_JQuery的class选择器遍历赋值的小技巧

在做项目中，遇到这样一个需求。

下边是一个轮播图，里边的块需要ajax从后端获取，然后动态地加载上去。

很明显，里边的元素只能通过class来获取。

我这里后台给返回了4条记录，但是通过$(".class")获取以后，会有9个class对象，直接each遍历并赋值的话，会报“Cannot read property 'lessonImage' of undefined”错误

$(".lessonimgurl").each(function (i, n) {

$(this).attr("src", data[i].lessonImage)

})

经过一番挣扎后，我放弃了从Js技术上的解决方法，采用了一个小技巧，就是对class对象取余，保证遍历元素不超出ajax返回的data的长度，这样就完美地解决了这个问题。

$(document).ready(function () {

$.ajax({

url: "http://localhost:8080/lesson/getall",

type: "GET",

dataType: "json",

success: function (data) {

lessonlength = data.length;

$(".lessonimgurl").each(function (i, n) {

i = i % lessonlength;

$(this).attr("src", data[i].lessonImage)

})

$(".studyurl1").each(function (i, n) {

i = i % lessonlength;

$(this).html(data[i].lessonName)

})

}

})

})