jquery - .each() 跳过第一项

Question

我在使用此函数时遇到了一些奇怪的行为，给定一个 HTML 文件(每次单击链接时都会异步加载到图库中)会使该 HTML 文件中的每个元素(“opacityLayer”)一一出现。

该函数在文档加载时被调用，在第一种情况下，它执行其应该执行的操作，并且每 300 毫秒一个一个地给出每个“opacityLayer”元素、“opacityLareIn”类。但是，当我单击新链接时，它会加载新的 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);