Javascript 查找下一个隐藏的div并使用jQuery选择器显示它

我正在jQuery中构建一个幻灯片，允许用户查看四个图像，并通过在底部via.load添加一个新的div，然后隐藏顶部div来前后翻页。我对编程非常陌生

我很难找到一个选择器来允许用户返回显示下一个隐藏的div，在第一个显示的div之后，并隐藏下面最后一个显示的div-faux代码示例

<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>

<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>

---

黑暗中的一枪，但是

选择第一个显示的div并将其向上滑动

$('.slideShow:visible:first').slideUp();

选择第一个显示的div之后的第一个隐藏div，然后将其向下滑动

$('.slideShow:visible:first').next('.slideShow:hidden').slideDown()

---

psuedo选择器FTW

我不太明白，但是这些信息可能会有所帮助……您需要匹配第一个可见的div，然后使用.prevAll（）和过滤器来获取隐藏的同级

$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();

---

类似于下面的内容应该可以做到这一点

$(function() {
   $(".scrollUp").click(function() {
     //Check if any previous click animations are still running
     if ($("div.slideShow:animated").length > 0) return;
     //Get the first visible div
     var firstVisibleDiv = $("div.slideShow:visible:first");

     //Get the first hidden element before the first available div
     var hiddenDiv = firstVisibleDiv.prev("div.slideShow"); 
     if (hiddenDiv.length === 0) return; //Hit the top so early escape
     $("div.slideShow:visible:last").slideUp();
     hiddenDiv.slideDown();
   });
   $(".scrollDown").click(function() {
     if ($("div.slideShow:animated").length > 0) return;
     var lastVisibleDiv = $("div.slideShow:visible:last");
     if (lastVisibleDiv.next("div.slideShow").length === 0) {
         //No next element load in content (or AJAX it in)
         $("<div>").addClass("slideShow")
                   .css("display", "none")
                   .text("Dummy")
                   .insertAfter(lastVisibleDiv);
     }
     $("div.slideShow:visible:first").slideUp();
     lastVisibleDiv.next().slideDown();
   });
});

$（函数（）{
$（“.scrollUp”）。单击（函数（）{
//检查以前的单击动画是否仍在运行
if（$（“div.slideShow:animated”）.length>0）返回；
//获取第一个可见的div
var firstVisibleDiv=$（“div.slideShow:visible:first”）；
//获取第一个可用div之前的第一个隐藏元素
var hiddenDiv=firstVisibleDiv.prev（“div.slideShow”）；
if（hiddenDiv.length==0）return；//这么早就点击顶部转义
$（“div.slideShow:visible:last”）.slideUp（）；
hiddenDiv.slideDown（）；
});
$（“.scrollDown”）。单击（函数（）{
if（$（“div.slideShow:animated”）.length>0）返回；
var lastVisibleDiv=$（“div.slideShow:visible:last”）；
if（lastVisibleDiv.next（“div.slideShow”）.length==0）{
//内容中没有下一个元素加载（或在其中加载AJAX）
$（“”）.addClass（“幻灯片放映”）
.css（“显示”、“无”）
.文本（“虚拟”）
.insertAfter（lastVisibleDiv）；
}
$（“div.slideShow:visible:first”）.slideUp（）；
lastVisibleDiv.next（）.slideDown（）；
});
});

---

该解决方案唯一要做的就是检查以前不可见的元素现在是否正在设置动画。这解决了在动画完成之前多次单击链接的一些问题。如果使用AJAX，您必须执行类似的操作（例如，打开/关闭全局变量，或者只禁用向下滚动链接），以避免同时向服务器发出多个请求…

今天，我在这个网站上花了数小时试图执行与此问题中发布的内容非常类似的操作

我所拥有的是上一个|下一个链接，通过一系列div导航，隐藏和显示

虽然我最终得到的答案与这里的不同……这是最能让我达到我需要的地方的答案

所以，谢谢

如果有人感兴趣，下面是我所做的：

<script language="javascript">

$(function() {
    $("#firstPanel").show();
});

$(function(){
    $(".nextButton").click(function () {
        $(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
    });
});
$(function(){
    $(".backButton").click(function () {
        $(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
    });
});
</script>

<style type="text/css">
    .defaultHidden { display: none; }
    .navigation { display: block; width: 700px; text-align: center; }
    #contentWrapper { margin-top: 20px !important; width: 700px; }
    .nextButton { cursor: pointer; }
    .backButton { cursor: pointer; }
</style>

<div class="navigation">
    <span class="backButton"><< Previous</span>&nbsp; | &nbsp;<span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
    <div id="firstPanel" class="panel defaultHidden">
        <img src="images/quiz/Slide1.jpg" width="640" />
    </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel" style="display: none;">
     <img src="images/quiz/Slide4.jpg" width="640" />
        </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
    <img src="images/quiz/Slide6.jpg" width="640" />
    </div>
    Repeat ad naseum...
</div>

$（函数（）{
$（“#firstPanel”）.show（）；
});
$（函数（）{
$（“.nextButton”）。单击（函数（）{
$（“.panel:visible”）.next（“.panel:hidden”）.show（）.prev（“.panel:visible”）.hide（）；
});
});
$（函数（）{
$（“.backButton”）。单击（函数（）{
$（“.panel:visible”）.prev（“.panel:hidden”）.show（）.next（“.panel:visible”）.hide（）；
});
});
.defaultHidden{显示：无；}
.navigation{显示：块；宽度：700px；文本对齐：中心；}
#contentWrapper{margin top:20px！重要；宽度：700px；}
.nextButton{cursor:pointer；}
.backButton{cursor:pointer；}
>
这里的信息
本款案文

这里的信息
本款案文

这里的信息
本款案文

重复这句话。。。

next only（下一个只获取下一个兄弟姐妹）…过滤器说，仅当下一个兄弟姐妹是blaHi redsquare时，才获取下一个兄弟姐妹-您使用prevAll发布了一个示例，我正在用谷歌搜索，但现在该示例消失了，您删除了吗？Jamie，谢谢-我还将尝试使用这些指针使其工作。如果下一个元素被隐藏，第二个示例将仅向下滑动div。如果第一个失败，它将不会继续寻找隐藏的兄弟姐妹。文档说：

获取匹配元素集中每个元素紧跟其后的兄弟元素。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟姐妹。

aha-好的，我将尝试让它工作，谢谢。谢谢，我使用了这个的一个变体。检查是否存在下一个可见项：也可以修改为检查是否存在具有prevAll的可见上一个项<代码>如果（$（“.element”）.nextAll（：visible:first”）.length>0{}谢谢，这是最好的答案

$(function() {
   $(".scrollUp").click(function() {
     //Check if any previous click animations are still running
     if ($("div.slideShow:animated").length > 0) return;
     //Get the first visible div
     var firstVisibleDiv = $("div.slideShow:visible:first");

     //Get the first hidden element before the first available div
     var hiddenDiv = firstVisibleDiv.prev("div.slideShow"); 
     if (hiddenDiv.length === 0) return; //Hit the top so early escape
     $("div.slideShow:visible:last").slideUp();
     hiddenDiv.slideDown();
   });
   $(".scrollDown").click(function() {
     if ($("div.slideShow:animated").length > 0) return;
     var lastVisibleDiv = $("div.slideShow:visible:last");
     if (lastVisibleDiv.next("div.slideShow").length === 0) {
         //No next element load in content (or AJAX it in)
         $("<div>").addClass("slideShow")
                   .css("display", "none")
                   .text("Dummy")
                   .insertAfter(lastVisibleDiv);
     }
     $("div.slideShow:visible:first").slideUp();
     lastVisibleDiv.next().slideDown();
   });
});

<script language="javascript">

$(function() {
    $("#firstPanel").show();
});

$(function(){
    $(".nextButton").click(function () {
        $(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
    });
});
$(function(){
    $(".backButton").click(function () {
        $(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
    });
});
</script>

<style type="text/css">
    .defaultHidden { display: none; }
    .navigation { display: block; width: 700px; text-align: center; }
    #contentWrapper { margin-top: 20px !important; width: 700px; }
    .nextButton { cursor: pointer; }
    .backButton { cursor: pointer; }
</style>

<div class="navigation">
    <span class="backButton"><< Previous</span>&nbsp; | &nbsp;<span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
    <div id="firstPanel" class="panel defaultHidden">
        <img src="images/quiz/Slide1.jpg" width="640" />
    </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel" style="display: none;">
     <img src="images/quiz/Slide4.jpg" width="640" />
        </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
    <img src="images/quiz/Slide6.jpg" width="640" />
    </div>
    Repeat ad naseum...
</div>