Посчитать количество элементов в jquery?

#javascript #html #jquery #css

Мне нужно считать количество блоков в блоке с классом .blocks и в зависимости от
их количества, создать столько же ссылок на эти элементы. Каждая ссылка будет скролить
к соответствующему элементу.

Подскажите пожалуйста, как можно это реализовать? Буду очень благодарен.




  

    1
  
  

    2
  
  

    3
  



Блок 1
Блок 2
Блок 3




    

Ответы

Ответ 1

$('.blocks .section').each(function(index, element){
  $(this).attr('data-block', index);  
  $('.navigation').append('
Блок '+$(element).html()+'
')
});

$(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;
});


  

    1
  
  

    2
  
  

    3
  








В данном случае не обязательно подсчитывать. Достаточно просто для каждого блока
вставлять ссылку, т.е. 

$('.blocks .section').each(function(index, element){
    $('.navigation').append('
Блок '+$(element).html()+'
')
});


Ответ 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(`
Блок ${i}
`);
    }
  }
}
.section {
  width: 100%;
  height: 400px;
}


  

    1
  
  

    2
  
  

    3