是否可以使用jquery或javascript将自动增量类添加到列表中

is it possible, to add auto incremental classes to a list by using jquery or javascript

本文关键字：添加 列表 可以使 jquery javascript 是否      更新时间：2023-09-26

是否可以将自动增量类添加到列表中

<ul id="list">
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
 <li>Element 4</li>
 <li>Element 5</li>
</ul>

现在，如果我将鼠标悬停在元素3上，那么将自动增量类添加到li中，如下例所示。。。

<ul id="list">
 <li class="left2">Element 1</li>
 <li class="left1">Element 2</li>
 <li>Element 3</li>
 <li class="right1">Element 4</li>
 <li class="right2">Element 5</li>
</ul>

再次，如果将鼠标悬停在元素1上，则向li添加自动增量类，如下例所示。。。

<ul id="list">
 <li>Element 1</li>
 <li class="right1">Element 2</li>
 <li class="right2">Element 3</li>
 <li class="right3">Element 4</li>
 <li class="right4">Element 5</li>
</ul>

很抱歉我英语不好。非常感谢。

$('li').hover(function() {
$('li').removeClass();
  var next = $(this).nextAll();
  next.each(function(i, v) {
    $(this).addClass('right' + (i+1))
  })
  var prev = $(this).prevAll();
  prev.each(function(i, v) {
    $(this).addClass('left' + (i+1))
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
</ul>

使用.prevAll（）和.nextAll（）

描述：获取匹配元素集中每个元素的所有前面的同级元素，可以选择由选择器进行筛选。

描述：获取匹配元素集中每个元素的所有以下同级元素，可选地通过选择器进行筛选。

然后对li进行迭代并分配索引。请确保删除li类，这样它就不会堆积

基于示例，当鼠标输入<li>中的任何一个并为它们添加新类时，我清除了<li>中的所有类。

left1+n将添加到前一个所有<li>，right1+n将增加到下一个所有的<li>

$("#list > li").on("mouseenter", function(){
    $("#list > li").attr("class", "");
  $(this).prevAll("li").each(function(i) {
    $(this).addClass('left' + (i+1));
  });
  $(this).nextAll("li").each(function(i) {
    $(this).addClass('right' + (i+1));
  });
});
相关文章：