Question

我有一个链接列表。

<ul class="categories-list">
  <li><a class="active" href="hematologia">Hematologia</a></li>
  <li><a class="" href="biochemia">Biochemia</a></li>
  <li><a class="" href="endokrynologia">Endokrynologia</a></li>
  <li><a class="" href="badania-moczu">Badania moczu</a></li>
  <li><a class="" href="diagnostyka-alergii">Diagnostyka alergii</a></li>
  <li><a class="" href="cytologia">Cytologia</a></li>
  <li><a class="" href="koagulologia">Koagulologia</a></li>
  <li><a class="" href="serologiawirusologia">Serologia/wirusologia</a></li>
  <li><a class="" href="mikrobiologia">Mikrobiologia</a></li>
  <li><a class="" href="mikologia">Mikologia</a></li>
  <li><a class="" href="pasozyty-krwi">Pasożyty krwi</a></li>
  <li><a class="" href="autoimmunologia">Autoimmunologia</a></li>
  <li><a class="" href="choroby-dziedziczne">Choroby dziedziczne</a></li>
  <li><a class="" href="parazytologia">Parazytologia</a></li>
  <li><a class="" href="histopatologia">Histopatologia</a></li>
  <li><a class="" href="badanie-kalu">Badanie kału</a></li>
  <li><a class="" href="autoszczepionki">Autoszczepionki</a></li>
  <li><a class="" href="plyny-biologiczne">Płyny biologiczne</a></li>
  <li><a class="" href="proteinogram">Proteinogram</a></li>
  <li><a class="" href="profile-ogolne">Profile ogólne</a></li>
  <li><a class="" href="profile-narzadowe">Profile narządowe</a></li>
  <li><a class="" href="profile-geriatryczne">Profile geriatryczne</a></li>
  <li><a class="" href="profile-pcr">Profile PCR</a></li>
  <li><a class="" href="profile-podrozne">Profile podróżne</a></li>
</ul>

我还有两个箭头：

左
右

当我点击链接时，我添加了课程＆＃34; active＆＃34;到ul＆gt; li>一个。

我想使用箭头在列表中的元素之间导航。

jQuery('.arrows a').click(function (e) {
        e.preventDefault();
        var active_element = jQuery( "ul.categories-list li a.active" );
        alert(active_element)
    });

我需要在列表中找到next或prev元素（取决于单击的箭头）并以编程方式单击它以更改活动元素。

如何实现这一目标？

Answer 1

您可以使用此脚本：

＆＃13;

jQuery('.arrows a').click(function(e) {
  if (this.textContent.trim() === 'left') {
    if($('ul.categories-list a.active').parent().index() === 0){ return false; }
    $('ul.categories-list a.active').removeClass('active').parent()
      .prev('li').find('a').addClass('active');
  } else {
    if ($('ul.categories-list a.active').closest('li').index() === $('ul.categories-list li').length - 1) { return false; }
    $('ul.categories-list a.active').removeClass('active').parent()
      .next('li').find('a').addClass('active');
  }
});

＆＃13;

.active {
  color: red;
  background: yellow;
  border: black 1px solid;
}
li {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='arrows'>
  <li><a href='#'>left</a>
  </li>
  <li><a href='#'>right</a>
  </li>
</ol>
<ul class="categories-list">
  <li><a class="active" href="hematologia">Hematologia</a>
  </li>
  <li><a class="" href="biochemia">Biochemia</a>
  </li>
  <li><a class="" href="endokrynologia">Endokrynologia</a>
  </li>
  <li><a class="" href="badania-moczu">Badania moczu</a>
  </li>
  <li><a class="" href="diagnostyka-alergii">Diagnostyka alergii</a>
  </li>
  <li><a class="" href="cytologia">Cytologia</a>
  </li>
  <li><a class="" href="koagulologia">Koagulologia</a>
  </li>
  <li><a class="" href="serologiawirusologia">Serologia/wirusologia</a>
  </li>
  <li><a class="" href="mikrobiologia">Mikrobiologia</a>
  </li>
  <li><a class="" href="mikologia">Mikologia</a>
  </li>
  <li><a class="" href="pasozyty-krwi">Pasożyty krwi</a>
  </li>
  <li><a class="" href="autoimmunologia">Autoimmunologia</a>
  </li>
  <li><a class="" href="choroby-dziedziczne">Choroby dziedziczne</a>
  </li>
  <li><a class="" href="parazytologia">Parazytologia</a>
  </li>
  <li><a class="" href="histopatologia">Histopatologia</a>
  </li>
  <li><a class="" href="badanie-kalu">Badanie kału</a>
  </li>
  <li><a class="" href="autoszczepionki">Autoszczepionki</a>
  </li>
  <li><a class="" href="plyny-biologiczne">Płyny biologiczne</a>
  </li>
  <li><a class="" href="proteinogram">Proteinogram</a>
  </li>
  <li><a class="" href="profile-ogolne">Profile ogólne</a>
  </li>
  <li><a class="" href="profile-narzadowe">Profile narządowe</a>
  </li>
  <li><a class="" href="profile-geriatryczne">Profile geriatryczne</a>
  </li>
  <li><a class="" href="profile-pcr">Profile PCR</a>
  </li>
  <li><a class="" href="profile-podrozne">Profile podróżne</a>
  </li>
</ul>

＆＃13;

Answer 2

第一个答案是有效的，除非你超越第一个或最后一个元素，所以你需要单独处理这些元素，阻止任何进一步的步骤或循环它们，如下所示：

jQuery('.arrows a').click(function(e) {
  var active = $('ul.categories-list a.active');
  var activeIndex = active.parent().index();
  if (this.textContent.trim() === 'left') {
    if(activeIndex > 0) {
      active.removeClass('active').parent()
        .prev('li').find('a').addClass('active');
    } else {
      active.removeClass("active");
      $('.categories-list li:last-child a').addClass("active");
    }
  } else {
    if(activeIndex == $('ul.categories-list li').length-1) {
       active.removeClass("active");
       $('.categories-list li:first-child a').addClass("active");
    } else {
      active.removeClass('active').parent()
        .next('li').find('a').addClass('active');
    }
  }
});

.active {
  color: red;
  background: yellow;
  border: black 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='arrows'>
  <li><a href='#'>left</a>
  </li>
  <li><a href='#'>right</a>
  </li>
</ol>
<ul class="categories-list">
  <li><a class="active" href="hematologia">Hematologia</a>
  </li>
  <li><a class="" href="biochemia">Biochemia</a>
  </li>
  <li><a class="" href="endokrynologia">Endokrynologia</a>
  </li>
  <li><a class="" href="badania-moczu">Badania moczu</a>
  </li>
  <li><a class="" href="diagnostyka-alergii">Diagnostyka alergii</a>
  </li>
  <li><a class="" href="cytologia">Cytologia</a>
  </li>
  <li><a class="" href="koagulologia">Koagulologia</a>
  </li>
  <li><a class="" href="serologiawirusologia">Serologia/wirusologia</a>
  </li>
  <li><a class="" href="mikrobiologia">Mikrobiologia</a>
  </li>
  <li><a class="" href="mikologia">Mikologia</a>
  </li>
  <li><a class="" href="pasozyty-krwi">Pasożyty krwi</a>
  </li>
  <li><a class="" href="autoimmunologia">Autoimmunologia</a>
  </li>
  <li><a class="" href="choroby-dziedziczne">Choroby dziedziczne</a>
  </li>
  <li><a class="" href="parazytologia">Parazytologia</a>
  </li>
  <li><a class="" href="histopatologia">Histopatologia</a>
  </li>
  <li><a class="" href="badanie-kalu">Badanie kału</a>
  </li>
  <li><a class="" href="autoszczepionki">Autoszczepionki</a>
  </li>
  <li><a class="" href="plyny-biologiczne">Płyny biologiczne</a>
  </li>
  <li><a class="" href="proteinogram">Proteinogram</a>
  </li>
  <li><a class="" href="profile-ogolne">Profile ogólne</a>
  </li>
  <li><a class="" href="profile-narzadowe">Profile narządowe</a>
  </li>
  <li><a class="" href="profile-geriatryczne">Profile geriatryczne</a>
  </li>
  <li><a class="" href="profile-pcr">Profile PCR</a>
  </li>
  <li><a class="" href="profile-podrozne">Profile podróżne</a>
  </li>
</ul>

Jquery - 如何访问下一个元素

2 个答案: