在jQuery中按类导航下一个或上一个div

本文介绍了在jQuery中按类导航下一个或上一个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试创建导航（下一个和上一个）按钮，显示具有标记为的下一个（或上一个）div。I am trying to create Navigation (Next and Previous) buttons, which displays the Next (or Previous) div having class marked. JSFiddle 链接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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！