jQuery - 从一个列表项获取事件类并将此类设置到另一个列表

标签 jquery html

我有两个包含 5 个项目的列表

第一:

<ol class="controls">
    <li><a id="bullet-0">1</a></li>
    <li><a class="active" id="bullet-1">2</a></li>
    <li><a id="bullet-2">3</a></li>
    <li><a id="bullet-3">4</a></li>
    <li><a id="bullet-4">5</a></li>
</ol>

第二:

<ul class="years">
    <li id="to-1973" class="year">1973</li>
    <li id="to-1983" class="year">1983</li>
    <li id="to-1994" class="year">1994</li>
    <li id="to-2004" class="year">2004</li>
    <li id="to-2015" class="year">2015</li>
</ul>

我想用 jQuery 检查第一个列表中的 hasClass 'active',然后将此类设置为第二个列表。

例如:
如果第一个列表中的第二个项目具有 active 类,请将此类 active 设置为第二个列表中的第二个项目,然后等等。如果第一个列表中的第三个项目事件,则从第二个列表中删除事件并将其设置为第三个项目。

提前致谢! :)

最佳答案

似乎大多数答案都针对列表项而不是 anchor (具有事件类)。

//get the index of the active control (target anchor, then get index of parent li)
var index = $('.controls a.active').parent().index();
//remove the current active from the years
$('.years li.active').removeClass('active');
//assign active to correct year
$('.years li').eq(index).addClass('active');

关于jQuery - 从一个列表项获取事件类并将此类设置到另一个列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34198293/

相关文章:

javascript - 如何在类名更改时再次执行js代码?

如果单选按钮被选中,则 jQuery addClass

javascript - 如何读取jsonp响应

javascript - jquery ajax get with serialize on success get url compiled

javascript - 使用android移动浏览器时如何获得连续的mousemove事件?

html - Bootstrap 设置列高和间距

javascript - 使用音频 html 元素指定持续时间

javascript - 为什么 Bootstrap 面板折叠不能与 JSF 一起使用?

html - 使用 ReactJS 映射物化 css <select> 的 <option>

HTML 转换属性