主页 / 问题 / 709097
Accepted
Александр
Asked:2020-08-22 20:43:31 +0000 UTC2020-08-22 20:43:31 +0000 UTC

计算jquery中的元素数？

  • 772

我需要使用 .blocks 类计算块中的块数，并根据它们的数量创建指向这些元素的相同数量的链接。每个链接都会滚动到相应的元素。

请告诉我如何实施？我会非常感谢。

<div class="blocks">
  <div class="section">
    1
  </div>
  <div class="section">
    2
  </div>
  <div class="section">
    3
  </div>
</div>

<ul class="navigation">
<li><a href="">Блок 1</a></li>
<li><a href="">Блок 2</a></li>
<li><a href="">Блок 3</a></li>
</ul>

javascript

2 个回答

  1. Best Answer

    $('.blocks .section').each(function(index, element){
  $(this).attr('data-block', index);  
  $('.navigation').append('<li class="scrollto" data-block="'+index+'">Блок '+$(element).html()+'</li>')
});

$(document).on('click', '.navigation .scrollto', function(){
  var block_id = $(this).attr('data-block'),
      block = $('[data-block="'+block_id+'"]:not(.scrollto)');
  if (block.offset() !== undefined){
    $('html, body').animate({
      scrollTop: block.offset().top
    }, 1000, 'swing', function(){
      // здесь код если надо что-то делать после прокрутки
    });
  }
  return false;
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks">
  <div class="section">
    1
  </div>
  <div class="section">
    2
  </div>
  <div class="section">
    3
  </div>
</div>

<ul class="navigation">
</ul>

    在这种情况下，没有必要计算。只需为每个块插入一个链接就足够了，即

    $('.blocks .section').each(function(index, element){
    $('.navigation').append('<li><a href="">Блок '+$(element).html()+'</a></li>')
});
    • 5

  2. 如果链接用于滚动，则可能值得通过 id 进行。如何添加链接已经被抛弃了（虽然我不认为这些部分真的会包含无法将示例称为成功的数字），但为了以防万一，我会抛弃另一个选项。

    $(function() {
  scrollToSection();
});

function scrollToSection() {
  let $blocks = $('.blocks'),
    $sections = $blocks.find('.section'),
    $navigation = $('.navigation');
    
  createAnchor();
    
  function createAnchor() {
    for(let i = 1; i <= $sections.length; i++) {
      let id = `section_${i}`;
      
      $sections.eq(i).attr('id', id)
      $navigation.append(`<li><a href="#${id}">Блок ${i}</a></li>`);
    }
  }
}
    .section {
  width: 100%;
  height: 400px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks">
  <div class="section">
    1
  </div>
  <div class="section">
    2
  </div>
  <div class="section">
    3
  </div>
</div>

<ul class="navigation"></ul>

    • 1

相关问题