在jQuery中按类导航下一个或上一个div [英] Navigate Next or Previous div by class in jQuery

问题描述

我正在尝试创建导航（下一个和上一个）按钮，显示具有标记为的下一个（或上一个）div。

I am trying to create Navigation (Next and Previous) buttons, which displays the Next (or Previous) div having class marked.

JSFiddle 链接< a>

JSFiddle Link

HTML零件

<table>
<tr id="row_question_container">
<td valign="top" colspan="2">
<div id="at_test_area-1" class="at_test_area">
    <div id="at_questions_container">
        <div id="1" class="question_block unmarked" > 
            Hello world 1
        </div>
        <div id="2" class="question_block marked" style="display: none;">
            Hello world 2
        </div>
        <div id="3" class="question_block unmarked" style="display: none">
            Hello world 3
        </div>
        <div id="4" class="question_block marked" style="display: none">
            Hello world 4
        </div>
        <div id="5" class="question_block unmarked" style="display: none">
            Hello world 5
        </div>
        <div id="6" class="question_block marked" style="display: none">
            Hello world 6
        </div>
        <div id="7" class="question_block marked" style="display: none">
            Hello world 7
        </div>
        <div id="7" class="question_block unmarked" style="display: none">
            Hello world 8
        </div>
    </div>
</div>
</td>
</tr>
</table>
<input type="button" id="previous" value="Previous">
<input type="button" id="next" value="Next">

jQuery零件

$(document).ready(
function () {
    var current_question_number = 0;

    $('#next').click(function () {
        ShowMarkedQuestion("next");
    });

    $('#previous').click(function () {
        ShowMarkedQuestion("previous");
    });

    function ShowMarkedQuestion(mode) {
        var id = $(".question_block").filter(function () {
            if ($(this).css('display') == 'block') {
                return true;
            }
        }).attr('id');
        $('#' + id).hide();
        if (mode === "next") {
            current_question_number = parseInt(id) + 1;
        } else if (mode === "previous") {
            current_question_number = parseInt(id) - 1;
        } else {
            current_question_number = parseInt(id);
        }
        $('#' + current_question_number).show();
    }
});

我知道，为了获得下一个div类标记为，我需要使用 find（）或 children（） like -

I learnt that, For getting next div having class marked, I need to use either find() or children() like -

var marked_question = $('#at_questions_container').find('.marked').attr('id');
console.log(marked_question);

但是，自从5天以来，我无法找到一种方法在导航按钮中实现它。我的意思是 find（）可以找到第一个div与类标记，然后如何导航到下一个类似的div。如果找到下一个div我使用

But, since 5 days I am unable to find a way to implement it in the navigation button. I mean find() can find first div with class marked, then how to navigate to next similar div. IF for finding next div I use

$('#at_questions_container').find('.marked').next('.marked').attr('id')

标记为？

推荐答案

id并查找已标记的下一个类。我已更新您的小提琴 http://jsfiddle.net/ppt4w78y/1/

you can do this by keeping track of the current id and looking for the next class that has marked. i have updated your fiddle http://jsfiddle.net/ppt4w78y/1/

$(document).ready(
function () {
    var self = this;
    this.currentId = '1';
    this.showNext;

    $('#next').click(function () {
        ShowMarkedQuestion("next");
    });

    $('#previous').click(function () {
        ShowMarkedQuestion("previous");
    });

    function ShowMarkedQuestion(mode) {
        self.showNext = false;
        var sel = $('.question_block');
        if (mode === 'previous') {
            sel = $(sel.get().reverse());
        }

        sel.each(function(idx, obj) {

            if ($(obj).attr('id') === self.currentId || !self.currentId) {
                self.showNext = true;
            }
            else if (self.showNext && $(obj).hasClass('marked')) {
                self.showNext = false;
                $('#' + self.currentId).hide();
                self.currentId = $(obj).attr('id');
                $(obj).show();
                return false;
            }
        });
    }
});

这篇关于在jQuery中按类导航下一个或上一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！