在 jQuery 中按 class 导航下一个或上一个 div
Navigate Next or Previous div by class in jQuery
我正在尝试创建导航(下一个和上一个)按钮,它显示具有 class marked
的下一个(或上一个)div。
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();
}
});
我了解到,为了获得 class marked
的下一个 div,我需要使用 find()
或 children()
,例如 -
var marked_question = $('#at_questions_container').find('.marked').attr('id');
console.log(marked_question);
但是,自 5 天以来,我一直找不到在导航按钮中实现它的方法。我的意思是 find()
可以先找到 div 和 class marked
,然后如何导航到下一个类似的 div。如果要查找下一个 div 我使用
$('#at_questions_container').find('.marked').next('.marked').attr('id')
那么,如何得到下一个有classmarked
?
您可以通过跟踪当前 ID 并查找下一个已标记的 class 来做到这一点。我已经更新了你的 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;
}
});
}
});
我正在尝试创建导航(下一个和上一个)按钮,它显示具有 class marked
的下一个(或上一个)div。
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();
}
});
我了解到,为了获得 class marked
的下一个 div,我需要使用 find()
或 children()
,例如 -
var marked_question = $('#at_questions_container').find('.marked').attr('id');
console.log(marked_question);
但是,自 5 天以来,我一直找不到在导航按钮中实现它的方法。我的意思是 find()
可以先找到 div 和 class marked
,然后如何导航到下一个类似的 div。如果要查找下一个 div 我使用
$('#at_questions_container').find('.marked').next('.marked').attr('id')
那么,如何得到下一个有classmarked
?
您可以通过跟踪当前 ID 并查找下一个已标记的 class 来做到这一点。我已经更新了你的 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;
}
});
}
});