jQuery - 从一个列表项中获取活动类并将此类设置为另一个列表答案

【问题标题】：jQuery - Get active class from one list item and set this class to another listjQuery - 从一个列表项中获取活动类并将此类设置为另一个列表
【发布时间】：2016-03-15 21:01:42
【问题描述】：

我有两个包含 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 设置为第二个列表中的第二项，然后等等。如果第一个列表中的第三项是 active，则从第二个列表中删除 active 并将其设置为第三项。

提前致谢！ :)

【问题讨论】：

您还在为解决方案而苦苦挣扎吗？

标签： jquery html

【解决方案1】：

你可以使用 .eq() 和 .index()

$('.years > li').eq($('.controls > li > a.active').closest('li').index()).addClass('active');

从第一个列表中获取 li 索引，然后将类添加到第二个列表中的相同 li 索引

如果你需要在点击事件中使用它

$('.controls > li > a').on('click', function(){
   var ThisIt = $(this);
   $('.years > li').eq(ThisIt.closest('li').index()).addClass('active');
});

Working Demo

注意：不要忘记包含 jquery

【讨论】：

【解决方案2】：

似乎大多数答案都针对列表项而不是锚点（具有活动类）。

//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');

【讨论】：

【解决方案3】：

你可以用这个：

$('.controls > li').on('click', function() {
  $('.active').removeClass('active'); // first remove the active class
  $('a', this).addClass('active'); // now add the active class
  $('.years > li').eq($('.controls .active').parent().index()).addClass('active');
  // here you can add the active class to specific list item.
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First:

<ol class="controls">
  <li><a id="bullet-0">1</a>
  </li>
  <li><a 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>
Second:

<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>

【讨论】：

【解决方案4】：

试试，

var cache = $("ol.controls a");
$("ul.years li").eq(cache.index(cache.filter(".active")).addClass("active");

【讨论】：