最后的内联列表项随附加列表消失

时间:2014-01-08 02:18:26

标签: javascript php jquery html css

我有一些php从文件夹中的图像创建一个数组:

    <?php
    $imagesDir = 'thumbnails/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    echo json_encode($images);
    ?>

然后一些用这些图像填​​充我的页面的js:

 $(document).ready(function() {
 $.getJSON('imager.php', function(data) {        



 $('.wrap ol').empty();
 $.each(data, function() {
   $('.wrap ol').append('<li><div class="box"><div class="boxInner"><a href="'+this+'" class="thumbnail"><img src="'+this+'"/></a></div></div></li>');
 });


 });
 }); 

它工作得很好,但是我已经在这个列表中有一个列表项目,当页面加载时,它现在从DOM中消失了:

  <ol>
    <li>
     No images found
     </li>
        <!-- In-line js above right here --> 
    <li>
           <div class="commentBox2">
            <p>
           3 wolf moon freegan Odd Future Helvetica,
           Wes Anderson Pitchfork leggings polaroid biodiesel.
           Shoreditch 90's 8-bit, squid Vice biodiesel photo booth Godard fap lomo tousled quinoa.
           Farm-to-table street art fashion axe post-ironic tote bag pop-up quinoa, cardigan butcher asymmetrical.
           Kogi semiotics forage cray direct trade distillery. Selfies trust fund fanny pack messenger bag,
           fap ethical fingerstache Odd Future kale chips semiotics DIY twee Schlitz. Odd Future kogi American Apparel,
           chambray photo booth Austin brunch. Narwhal Echo Park gluten-free mixtape, Marfa tofu hashtag food truck
           squid fap freegan irony XOXO kale chips.
          </p>
           </div>

    </li>
  </ol>

除此之外,我在身体底部有一个脚本,用于调整(window).load上的垂直图像的大小,这个图像没有触发(或者至少不在正确的时间)。

JS看起来像这样:

           $(window).load(function() {
               $('img').each(function(index) {
                   var width = $(this).width();    // Current image width
                   var height = $(this).height();  // Current image height

                   // Check if the current width is larger than the max
                   if(height > width){
                       $(this).css("width", "44.5%"); // Set new width
                   }
               });
           });

当我的图片及其各自的列表项和容器直接放在HTML中时,一切都工作得很花哨,但现在有些不对劲了。非常感谢帮助。如果需要更多信息,请告诉我。

谢谢!

2 个答案:

答案 0 :(得分:1)

删除$('.wrap ol').empty();怎么样? :)

答案 1 :(得分:0)

  

但是我已经在此列表中有一个列表项,当页面加载

时,它现在从DOM中消失了

因为这样:$('.wrap ol').empty();,它会清空那个ol标签的内容。

至于你的其他问题,你的浏览器是否会触发任何JS错误? Chrome Windows上的 CTRL + SHIFT + C 打开调试器。