JQuery的class选择器遍历赋值的小技巧

最新推荐文章于 2024-07-19 03:08:33 发布

原创最新推荐文章于 2024-07-19 03:08:33 发布 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #each #class选择器

个人笔记（有不准确的）同时被 2 个专栏收录

13 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

在处理动态加载的轮播图时，遇到通过class选择器获取到的元素数量多于实际数据的问题，导致遍历时出现错误。为了解决这个问题，采取了对class对象进行取余操作，确保遍历范围不超过后端返回数据的长度，从而成功避免了'lessonImage' of undefined的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

下边是一个轮播图，里边的块需要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的长度，这样就完美地解决了这个问题。

<script type="text/javascript">
        $(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)
                    })
                }
            })
        })
    </script>