Javascript 上一个和下一个div始终为空_Javascript_Jquery_Slider

Javascript 上一个和下一个div始终为空

javascript jquery

Javascript 上一个和下一个div始终为空,javascript,jquery,slider,Javascript,Jquery,Slider,我有这个HTML结构： <body> <div id="content" class="clearfix">  <div> <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije

我有这个HTML结构：

<body>
<div id="content" class="clearfix">
    <!-- Page 1 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija1.jpg" />
    </div>

    <!-- Page 2 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija2.jpg" />
    </div>

    <!-- Page 3 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija3.jpg" />
    </div>

    <!-- Page 4 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija4.jpg" />
    </div>
</div>
<div id="navigation" class="clarfix">
    <div id="accordion">
        <!-- 1st header and pane -->
        <img src="horisontalTabsAccordion/images/button1.jpg" />
        <div style="width: 250px; display:block"><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>

        <!-- 2nd header and pane -->
        <img src="horisontalTabsAccordion/images/button2.jpg" />
        <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>

        <!-- 3rd header and pane -->
        <img src="horisontalTabsAccordion/images/button3.jpg" />
        <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>

        <!-- 4th header and pane -->
        <img src="horisontalTabsAccordion/images/button4.jpg" />
        <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>
    </div>
    <div id="buttons">
        <a href="#" class="btn-prev"><div class="previous-icon"></div></a>
        <a href="#" class="btn-next"><div class="next-icon"></div></a>
    </div>
</div>

<script type="text/javascript">
    $("#accordion").tabs("#accordion div", {
      tabs: 'img',
      effect: 'horizontal'
    });
</script>

和pager.js:

var currentTab = null;
var choosenTab = null;

function bindTabs() {
// Set current tab variable when image is clicked
$('#accordion img').each(function() {
    $(this).bind('click', function() {
        currentTab = $(this);
    });
    });
}

function bindNext() {
$('.btn-next').bind('click', function(){ 
     choosenTab = currentTab.nextUntil('img').next();

     if (choosenTab.length != 0) { // Next image tag found
         choosenTab.get(0).click();
         currentTab = choosenTab;
     }
     return false;
});
}

function bindPrevious() {
$('.btn-prev').bind('click', function(){
    choosenTab = currentTab.prevUntil('img').prev();

    if (choosenTab.length != 0) { // Previous image tag found
        choosenTab.get(0).click();
        currentTab = choosenTab;
    }

    return false;
});
}

$(document).ready(function(e) {
currentTab = $('#accordion').find('img.current');

bindTabs();
bindPrevious();
bindNext();
});

var currentPageIndex = 0;
var currentPage = null;
var choosenPage = null;

function setCurrentPage() {
currentPage = $('#content > div:first-child');
}

function setInitialCurrentPage() {
$('#content > div:first-child').addClass("currentPage");
setCurrentPage();
choosenPage = currentPage;
}

function addRemoveCurrentPageClass() {
choosenPage.addClass('currentPage');
currentPage.removeClass('currentPage');
}

function preparePrevButton() {
$('.btn-prev').bind('click', function() {
    setCurrentPage();
    choosenPage = currentPage.prevUntil('div').prev();
    console.log(choosenPage); // Always is null

    if (choosenPage.length != 0) {
        addRemoveCurrentPageClass();
        currentPage = choosenPage;
    }
    return false;
});
}

function prepareNextButton() {
$('.btn-next').bind('click', function() {
    setCurrentPage();
    choosenPage = currentPage.nextUntil('div').next();
    console.log(choosenPage); // Always is null

    if (choosenPage.length != 0) {
        addRemoveCurrentPageClass();
        currentPage = choosenPage;
    }
    return false;
});
}

function prepareNavButtons() {
preparePrevButton();
prepareNextButton();
}

function prepareAcordionTabs() {

}

$(document).ready(function(e) {
    setInitialCurrentPage();
prepareNavButtons();
prepareAcordionTabs();
});

当我想查找当前div的下一个或上一个div时，就会出现问题。当前div是一个具有类“currentPage”的div

如果有人想拥有所有的源代码，可以使用Mercurial并从Google代码中提取数据。

谷歌代码项目网站是：

你的问题更适合CodeReview为什么使用

currentPage.nextUntil（'div'）.next（）

而不是

currentPage.next（）

？

.next（）

方法返回下一个同级，这是您想要的。您不需要

.nextUntil（）

。请看另一个问题中的html结构不同。此问题中显示的html结构将“页面”作为同级，因此

.next（）

将起作用。同样，您不需要

.nextUntil（）

。您可以将代码缩小到发生错误的相关部分和/或在上复制一个小测试用例吗