获取视图中当前元素的id

Obtain id of current element in view

本文关键字：元素 id 视图 获取      更新时间：2023-09-26

我有一个页面上按字母顺序排列的项目列表。我想创建一个固定的元素，在显示的页面的一边，哪个字母部分，你目前正在滚动。

例如，如果您正在滚动过去以字母'D'开头的项目，则固定div将显示'D'。我一直在尝试用jQuery创建这个，但一直发现它很棘手。

每个部分都有一个类'card-container'和一个'id'，对应于当前的字母。

。

<div id="a" class="card-container">
  ...
</div>
<div id="b" class="card-container">
  ...
</div>
<div id="c" class="card-container">
  ...
</div>
...

你知道我该怎么做吗?

编辑

到目前为止，我有这个:

$(window).scroll(function() {
  var winTop = $(this).scrollTop();
  var letters = $('.card-container');
  letters.each(function(section) {
    if($(this).position().top <= winTop) {
      console.log($(this).context.id);
      $('.letter-show h3').text($(this).context.id);
    }
  });
});

所以这似乎工作，但我觉得它不是很性能。有什么改进的建议吗?

正如我在评论中所说的那样:您可以做的事情不多-最多几毫秒的增益。比如最小化DOM查找和在找到正确元素时中断循环，放弃jQuery等等……但我怀疑，即使在你能找到的最慢的机器上，你也不会注意到差异。

var letters = $('.card-container');
var letterShow = $('.letter-show h3');
$(window).scroll(function() {
  var winTop = $(this).scrollTop();      
  letters.each(function(section) {
    if($(this).position().top <= winTop) {
      letterShow.text($(this).context.id);
    }
  });
});
.card-container {height: 300px;border-top: 1px solid}
.letter-show {position: fixed}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="letter-show"><h3></h3></div>
<div id="a" class="card-container">
  ...
</div>
<div id="b" class="card-container">
  ...
</div>
<div id="c" class="card-container">
  ...
</div>
<div id="d" class="card-container">
  ...
</div>
<div id="e" class="card-container">
  ...
</div>

是这样的:

$(window).scroll(function() {
  var winTop = $(this).scrollTop();
  var letters = $('.card-container');
  letters.each(function(section) {
    if($(this).position().top <= winTop) {
      $('.letter-show h3').text($(this).context.id);
    }
  });
});

相关文章：