如何在多个div上使用jQuery each()检测div中元素的结尾

dy2hfwbg 于 2023-01-20 发布在 jQuery

关注(0)|答案(2)|浏览(145)

我有几个div，它们有相同的类.timeline-travel-steps。这些div包含我想用jQuery each()方法选择的元素.step

- 超文本标记语言**

<div class="timeline-graphic">
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
</div>

<div class="timeline-graphic">
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
</div>

- JS（jQuery）软件包**

var i = 0;
$(".timeline-graphic .step").each(function(index, value) {
  $(this).css('left', i + 'px');
  i = i + 20;
});

它可以工作，但是我需要知道each()何时到达div timeline-travel-steps的末尾。目前each()继续运行其他div中包含的元素。如果每个div有一个不同的静态类，这将非常简单，但是这些div是由cms生成的，我不知道有多少。
我需要这样的东西：

if (isLastElement) {
    i = 0;
}

我试过玩index和.length，但是each()继续运行。
下面是一个片段
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

jquery

来源：https://stackoverflow.com/questions/75173943/how-to-detect-end-of-elements-in-div-with-jquery-each-on-multiple-div

2条答案

按热度按时间

68bkxrlz1#

如果将each与index参数一起使用，则无需使用另一个计数器变量。只需为每个.timeline-graphic元素循环所有.step元素即可

$('.timeline-graphic').each(function() {
  $('.step', this).each(function(index, v) {
     console.log(index);
     $(this).css('left', (index * 20) + 'px');
  });
})

顺便说一句，对于此类任务，甚至不需要使用jQuery和/或position: absolute，因为您可以使用use only CSS，方法是使用gap属性调整Flexbox容器内点的距离：
x一个一个一个一个x一个一个二个x
如果点的距离是由JavaScript决定的，你仍然可以使用CSS解决方案，使用JS来更新一个自定义变量，例如。
一个三个三个一个

赞(0）回复(0）举报 2023-01-20

col17t5w2#

可以使用检查当前step是否是父对象中的最后一个

$(this).is(":last-child")

注意：它需要是最后一个元素，而不仅仅是最后一个step（后面没有元素）。嵌套的each是最干净的解决方案（IMO）-请参见其他答案。
有一个experimental:nth-last-child(1 of .step)，但只在Safari中工作（所以不推荐）
更新的片段（未进行任何其他变更，因此这不太可能是最佳/最终解决方案）
x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-01-20

我来回答

如何在多个div上使用jQuery each()检测div中元素的结尾

2条答案

相关问题

热门标签

最新问答