css .not(this) 元素根据它的索引

Question

我正在尝试创建一个手风琴滑块。 到目前为止，我已经做到了：

1. 通过将滑块宽度除以滑块数来启动每张幻灯片的第一个位置。
2. 每次单击幻灯片都会将其移动到等于 5% * 当前幻灯片索引值的位置（例如，第一张幻灯片的 0x5%、第二张幻灯片的 1x5%、第三张幻灯片的 2x5% 等等）。李>

这是目前为止的代码：

jQuery(document).ready(function($) {

  $(".slides li").each(function(initial) {
    var sliderwidth = $(".slides").width(); //entire slider width
    var slideindex = $(".slides li").length; //how many slides are in a slider
    var firstpos = sliderwidth / slideindex; //divided entire width by number of slides (1000/4 in this case, equals 250)
    initial = initial * firstpos; //each slides's initial position is incremented by 250, making the slides position 0, 250px, 500px, 750px
    $(this).css("left", initial); //css left with numbers above
  });

  $(".slides li").click(function() {
    var moveindex = $(".slides li").index(this); //the index value of the clicked slide (eg. 0, 1, 2 or 3)
    var movethis = parseInt(moveindex, 10) * 5; //multiply index value of current slide by 5 (as we want each slide to position itself on click 5% to the left)
    $(this).css("left", movethis + "%"); //css left with numbers above

  });

});

现在我正在尝试让其他幻灯片（不是当前单击的幻灯片）根据它们的相对索引值移动。例如：

单击幻灯片 #4 会将幻灯片 1 移动到 0x5%，将幻灯片 2 移动到 1x5%，将幻灯片 3 移动到 2x5%。

但我找不到办法

$(".slides li").not(this).index();

有什么想法吗？

谢谢！

Answer 1

使用index，您可以在调用index 的结果集中获取传递元素的索引。

所以你想遍历所有不是this 的li 并检查index 这个li 在所有li 的列表中的内容：

var listOfAllLi = $(".slides li")
var listWithoutThis = listOfAllLi.not(this)

listWithoutThis.each(function(_, element) {
  var indexOfElement = listOfAllLi.index(element)
  console.log(indexOfElement)
})