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

Question

我正在尝试创建 Accordion slider 。 到目前为止，我已经设法:

1. 通过将 slider 宽度除以 slider 数来启动每张幻灯片的第一个位置。
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)
})