jQuery- .load（）更多带有嵌入式YouTube视频的div

Question

我的网站上有一个视频页面，其中有许多div，其中嵌入了包含标题，说明等的YouTube视频。

我怎样才能使它只显示前3个div，然后在“加载更多”按钮的每次点击时再加载3个。

我已经尝试隐藏所有div然后.show（）前三个然后显示接下来的三个每次点击但由于某种原因嵌入视频或者iframes你实际上看不到它们“让他们看。实际上只显示其他html元素。

这是我失败的尝试：

$(function(){
            $("div").slice(0, 3).show(); // select the first three
            $("#load").click(function(e){ // click event for load more
                e.preventDefault();
                $("div:hidden").slice(0, 3).show(); // select next 3 hidden divs and show them
                if($("div:hidden").length == 0){ // check if any hidden divs still exist
                    alert("No more divs"); // alert if there are none left
                }
            });
        });

Answer 1

使用show / hide在display:和display:block之间切换div的display:none属性。使用display:none时，不会渲染元素（视频也不会被加载）。您可以使用visibility: hidden来代替或者可能绝对将“隐藏”div设置在屏幕外，使用类似position:absolute; top:-9999px的内容，然后在点击“加载更多”按钮时将其移回。