.each() 跳过第一项

Question

这个函数有一些奇怪的行为，给定一个 HTML 文件（每次我们单击 link 时异步加载到图库中）使每个元素 ("opacityLayer")在那个 HTML 文件中一个接一个地出现。

该函数在文档加载时被调用，在第一种情况下，它会执行它应该做的事情，它会为每个 "opacityLayer" 元素、"opacityLareIn" class 提供一个一个，每 300 毫秒。但是当我点击一个新的 link 时，它会加载新的 HTML 文件，并跳过我不理解的第一个 "opacityLayer" 元素。也对我的代码添加了评论。

$(document).ready(function(){

//runs the function as the document is loaded.
showThem();

/* The function, gives every opacityLayer element,
the class of opacityLayerIn, by order, every 300ms */
function showThem(){
  $(".opacityLayer").each(function(i) {
    setTimeout(function() {
      $(".opacityLayer").eq(i).addClass("opacityLayerIn");
    }, 300 * i);
  });
}

/* The list where my links are, everytime a link is clicked
   it's data value it's used as a parameter for the loadContent function */
$(".categoryList").on("click", function(e){
  var target = $(event.target).attr('data-name');
  $(event.target).addClass("selected").siblings().removeClass("selected");
  loadContent(target);
 })

/*The loadContent function loads the HTML files into the gallery and
  calls the showThem function, but when the new content loads, the
  first element is being skipped */
function loadContent(value){
  $(".gallery").load(value +".html");
    showThem();
    $("#mainSectionTitle").addClass("animate-inLeft");
    $(this).siblings().removeClass("selected");
    $(this).addClass("selected");
    $(".wrapper h1").text(value);
    setTimeout(timeOut, 700);
}



});

有人知道这里可能是什么问题吗？

Answer 1

内容尚未从 ajax 请求中加载，您正试图在加载之前显示它。尝试使用 .load() 的 complete 回调参数。将您的 showThem 函数作为回调函数传入，如下所示：

$(".gallery").load(value +".html", showThem);

.each() 跳过第一项

.each() skipping the first item

each

jquery