在jQuery中按類導航下一個或上一個div

Question

我正在嘗試創建導航（Next和Previous）按鈕，該按鈕顯示類marked的Next（或Previous）div。

的jsfiddleLink

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(); 
    } 
}); 

我得知，爲了得到具有marked類下一格，我需要爲使用find()或children()像 -

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

但是，因爲5天我無法找到一個方法來實現它的導航按鈕。我的意思是find()可以找到類marked第一個div，然後如何導航到下一個類似的div。 IF用於尋找下一個div我使用

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

然後，如何獲得下一個有類marked？

Answer 1

您可以通過跟蹤當前ID並尋找下一個已標記的課程來做到這一點。我已更新你的小提琴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; 
      } 
     }); 
    } 
});