Question

我有两种不同的群体。每个组具有相同数量的项目。第二组一些元素具有一些不同的更新。如何根据第二组更新项将活动类设置为第一组元素

这是我的结果，它将如何显示，

<div id="numberOfProjects">
      <div class="projectListTrigger">
        <a href="#">1</a>
        <a href="#">2</a>
      </div>
      <div class="projectListTrigger">
        <a href="#">3</a>
        <a href="#" class="updateAvailable">4</a>
        <a href="#">5</a>
      </div>
      <div class="projectListTrigger">
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#" class="updateAvailable">9</a>
      </div>
    </div>
    <div id="mainSection">
      <div class="mainSectionItem">
        <div>1</div>
        <div>2</div>
      </div>
      <div class="mainSectionItem">
        <div>3</div>
        <div>4 <div class="update">update</div></div>
        <div>5</div>
      </div>
      <div class="mainSectionItem">
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9 <div class="update">update</div></div>
      </div>
    </div>

这是js，

var $currentUpdate = $('.update').parents('#mainSection > div > div').index('#mainSection > div > div');
    $('#numberOfProjects a').each(function(){
        $(this).eq($currentUpdate).addClass('updateAvailable');
    });

Answer 1

使用以下代码

DEMO

$('.update').each(function(){
   $('.projectListTrigger')
     .eq($(this).parents('.mainSectionItem').index())
     .find('a')
     .eq($(this).parent().index())
     .addClass('updateAvailable');
});

Answer 2

我认为您正在寻找类似下面的内容。

＆＃13;

var mainSectionArray = $('.mainSectionItem');

mainSectionArray.each(function() {
  var msa = $(this);
  var msaIndex = msa.index();

  msa.children().each(function() {
    var msaChild = $(this);
    if (msaChild.children('div').hasClass('update')) {
      $('.projectListTrigger').eq(msaIndex).children().eq(msaChild.index()).addClass('updateAvailable');
    }
  });
});

＆＃13;

.updateAvailable {
  color: #FF0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numberOfProjects">
  <div class="projectListTrigger"> <a href="#">1</a>
    <a href="#">2</a>

  </div>
  <div class="projectListTrigger"> <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>

  </div>
  <div class="projectListTrigger"> <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>

  </div>
</div>
<div id="mainSection">
  <div class="mainSectionItem">
    <div>1</div>
    <div>2</div>
  </div>
  <div class="mainSectionItem">
    <div>3</div>
    <div>4
      <div class="update">update</div>
    </div>
    <div>5</div>
  </div>
  <div class="mainSectionItem">
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9
      <div class="update">update</div>
    </div>
  </div>
</div>

＆＃13;

编辑：看起来Nishit Maheta的回答可能更有效率，因为我的代码遍历每个div，而Nishit只迭代必要的元素。

如何在jquery中从其他基于组的索引设置活动的一类组元素？

2 个答案: