Jquery 附加的DIV仅在调整大小时显示

对于我的公文包站点，我正在调用一个json对象，解析它并动态构建div。所有这些都可以正常工作，但我附加的div没有显示出来。它是空白的。如果我尝试调整窗口大小，内容会神奇地出现

网站是

Js is->root->Js->Main.Js（第65行）

$.getJSON（'./clients.txt'，函数（数据）{
用于（数据中的var i）{
风险值
“+数据[i].名称+”
客户端：'+数据[i]。客户端+'
类型：'+数据[i]。类型+'
“+数据[i].desc1+”
“+数据[i].描述2+”
';
$（'article#portfolio#sliderPort.swipe wrap'）.append（已生成）；
}
});

有什么想法吗？

看看这是否有帮助：

$.getJSON('./clients.txt',function(data) {
 var htm = null;
 for(var i in data) {
      htm += '
      <div id="siteRoll">
           <div class="thumb"><img src="clients/'+data[i].thumb+'"></div>
           <div class="info">
                <span class="title">'+data[i].name+'</span>
                <span class="desc">CLIENT : '+data[i].client+'</span>
                <span class="desc">TYPE   : '+data[i].type+'</span>
                <span class="desc2">'+data[i].desc1+'</span>
                <span class="desc2">'+data[i].desc2+'</span>
                <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit    site</a></span>
           </div><!-- info -->
      </div><!-- siteRoll -->';
  }

  $('article#portfolio #sliderPort .swipe-wrap').html(htm);
});

$.getJSON（'./clients.txt'，函数（数据）{
var htm=null；
用于（数据中的var i）{
htm+='
“+数据[i].名称+”
客户端：'+数据[i]。客户端+'
类型：'+数据[i]。类型+'
“+数据[i].desc1+”
“+数据[i].描述2+”
';
}
$（'article#portfolio#sliderPort.swipe wrap'）.html（htm）；
});

您似乎在页面加载时构建旋转木马，但在页面加载后添加内容。大多数旋转木马（假设它是一个插件）都不是这样工作的——在构建内容之前，您需要先显示您的内容

这个特定的旋转木马似乎也会对window.resize做出反应，所以这就是为什么只有在调整窗口大小和旋转木马刷新后才能获取内容的原因

---

如果插件支持refresh（）方法，我会在页面加载时添加动态数据后调用它。

我有一个性能修复的想法-不要一行一行地添加此变量，完整地构建生成的变量，然后再将其添加到页面上-可能还可以节省大量不必要的处理，无需使用多个id选择器（#），因为id对于页面是唯一的，所以

$（“#sliderPort.swipe wrap”）

本身就可以很好地工作（而且会更快，因为jQuery不需要浏览所有文章来查找您要查找的内容）；）当页面第一次呈现时，您的

.swip wrap

设置了

宽度：0px

。这就是造成隐形问题的原因。也许你应该从那里开始。@ZathrusWriter谢谢！！我将最后添加它们并更改ID。宽度：0px是插件所做的事情。我不认为这是个问题。。让我也看看！除了其他注释外，您正在使用该代码生成重复的ID。

id=“siteRoll”

在循环中，因此每次迭代都会使用该id创建一个新的div。。

$.getJSON('./clients.txt',function(data) {
 var htm = null;
 for(var i in data) {
      htm += '
      <div id="siteRoll">
           <div class="thumb"><img src="clients/'+data[i].thumb+'"></div>
           <div class="info">
                <span class="title">'+data[i].name+'</span>
                <span class="desc">CLIENT : '+data[i].client+'</span>
                <span class="desc">TYPE   : '+data[i].type+'</span>
                <span class="desc2">'+data[i].desc1+'</span>
                <span class="desc2">'+data[i].desc2+'</span>
                <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit    site</a></span>
           </div><!-- info -->
      </div><!-- siteRoll -->';
  }

  $('article#portfolio #sliderPort .swipe-wrap').html(htm);
});