Jquery美元.每个循环处理数组

Jquery $.each loop dealing with array

本文关键字：处理 数组 循环 美元 Jquery      更新时间：2023-09-26

我正在jquery中使用对象内的url数组，我正在非常接近完成的地方，但是我有一个小问题。

我将下面的循环绑定到一个click函数，当用户点击一张照片(在[location])时，一堆相应的照片应该在下面加载，这些照片存储在一个数组中，我可以成功地访问正确对象内部的数组，但不是按顺序插入URL，而是将每个URL插入到每个照片中，以逗号分隔。

。e代替:img src="[0]", img src="[1]", img src="[2]"…

我得到了:img src="[0],[1],[2]"…

$.each(albums[location].photos, function(index, val){
  $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;"><img src='+albums[location].photos+' id="coverPhoto" height="320" width="320"><figcaption>'+location+'</figcaption></a></div>');
});

我想我可以用另一个循环来解决它，但由于使用$.each，这似乎很笨拙。

如有任何帮助，不胜感激

你必须使用$.each

的参数

你有两种方法，使用索引或值

 $.each(albums[location].photos, function(index, val){   $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail"
 style="display:inline-block; padding: 0 25px;"><img
 src='+albums[location].photos[index]+' id="coverPhoto" height="320"
 width="320"><figcaption>'+location+'</figcaption></a></div>'); });

或

$.each(albums[location].photos, function(index, val){   $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail"
style="display:inline-block; padding: 0 25px;"><img
src='+val+' id="coverPhoto" height="320"
width="320"><figcaption>'+location+'</figcaption></a></div>'); });

前置一次主容器，并在即将完成循环时关闭它，下面是更清晰的代码

$.each(albums[location].photos, function(index, val){
    if (index == 0) {
       $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;">');
    }
    $('#'+cover_id+'').append('<img src='+albums[location].photos[index]+' id="coverPhoto" height="320" width="320">');
    if (albums[location].photos.length >= (index - 1)) {         
       $('#'+cover_id+'').append('<figcaption>'+location+'</figcaption></a></div>');
    }
});

问题:您正在分配整个数组本身作为源，而不是在索引处指定一个特定的数组。<img src='+albums[location].photos+'

解决方法:使用回调函数返回的val变量。这个val指向索引中的特定项，每次迭代都指向下一个项。

<img src='+val+'

我相信你会想用<img src='+val+'...代替<img src='+albums[location].photos+'...

我还想补充一点，看起来您在重复的元素中重用了id，这几乎肯定会在将来产生问题，例如，如果您想在同一页面中运行两次图像替换。这也违反了HTML规范

相关文章：