如何突出显示正在循环的元素？
如何突出显示正在循环的元素？
提问于 2015-06-29 03:06:16
我一直在学习自己编写代码，而且我对Javascript的了解是非常基本的.当我试图循环一个列表时，我遇到了一个问题，我想包装其索引与列表中的索引匹配的元素，并摆脱others.....of课程没有做我想做的事情，这就是我所拥有的：
<div id='wrapper'>
<ul id='list'>
<span id='next'>Next</span>
<li>Cat</li>
<li>Dog</li>
<li>Eagle</li>
<li>Fox</li>
<li>Mouse</li>
<span id='prev'>Prev</span>
<div id='ci'></div>
</ul>
var current_index = 0;
var uli = $("#list li");
function cycle(){
var start = uli.eq(current_index);
$("#ci").html(current_index);
//alert(uli.index(start))
var pic = uli.index(start);
if(start.parent().is('#this')){
start.unwrap();
}else if(current_index == pic){
start.wrap("<div id='this'></div>");
}
}
$('#next').click(function(){
current_index += 1;
if(current_index > uli.length - 1){
current_index = 0;
}
cycle();
});
$('#prev').click(function(){
current_index -= 1;
if(current_index < 0){
current_index = uli.length -1;
}
cycle();
});- 小提琴
我希望我已经解释了我自己，并感谢你的时间，我真的很感激！
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-29 03:11:10
您需要包装li的内部内容，并解压缩#this的内容。
function cycle() {
$("#ci").html(current_index);
$('#this').contents().unwrap();
uli.eq(current_index).wrapInner('<div id="this"></div>');
}
var current_index = -1;
var uli = $("#list li");
function cycle() {
$("#ci").html(current_index);
$('#this').contents().unwrap();
uli.eq(current_index).wrapInner('<div id="this"></div>');
}
$('#next').click(function() {
current_index++;
if (current_index > uli.length - 1) {
current_index = 0;
}
cycle();
});
$('#prev').click(function() {
current_index--;
if (current_index < 0) {
current_index = uli.length - 1;
}
cycle();
});#this {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='wrapper'>
<!-- should be outside of the ul as span can't be a direct child of ul -->
<span id='next'>Next</span>
<ul id='list'>
<li>Cat</li>
<li>Dog</li>
<li>Eagle</li>
<li>Fox</li>
<li>Mouse</li>
</ul>
<!-- should be outside of the ul as span/div can't be a direct child of ul -->
<span id='prev'>Prev</span>
<div id='ci'></div>
</div>
Stack Overflow用户
发布于 2015-06-29 03:21:26
在你的代码中：
$('#prev').click(function(){
current_index -= 1;
if(current_index < 0){
current_index = uli.length -1;
}
// delete all other highlighted
$('.highlight').removeClass('highlight');
// make this highlighted
$(this).addClass('highlight');
cycle();
});例如，在css中：
.highlight {
border: 1px solid green;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31107160
复制相关文章
相似问题
腾讯云开发者
