Как правильно конвертировать следующие Jquery в чистые Javascript?

Question

Как я могу преобразовать Jquery ниже в чистый JavaScript?

var $buttons = jQuery("#thePaginator li a");
for (var index = 0; index < $buttons.length; index++) {
    var $button = $buttons.eq(index);
    $button.click(function() {
        var newPage = $(this).data("page");
        jQuery("#attribute-myAttribute").val(newPage);
        jQuery("#update").click();
    });
}

Обычно я бы не задавал такой вопрос, но преобразование было трудным, особенно с прослушивателем событий , Вот что у меня есть:

runPaginate();
function runPaginate(){
    var buttonArray = document.getElementById("paginator_TCC").querySelectorAll('li');
    for(i=0;i<(buttonArray.length);i++){
        buttonArray[i].addEventListener('click', runUpdate);
    }
}

function runUpdate(){
    console.log("runUpdate started")
    // will need to add code in here for update
}

update (в Jquery) - это метод, который вызывается для обновления атрибутов на странице. Считайте, что функции runUpdate достаточно для вызова этого метода.

Я считаю, что у меня так много проблем, потому что я имею дело с HTML Collection, поэтому, когда я получаю элементы li (которые на самом деле являются кнопками) Я не могу добавить к ним прослушиватель событий. Ниже приведен результат проверки Dev Tools:

<div id="thePaginator" class="simple-pagination">
 <ul>
  <li class="disabled">
   <span class="current prev">Prev</span>
  </li>
  <li class="active">
   <span class="current">Year 1</span>
  </li>
  <li class="disabled">
   <span class="current next">Next</span>
  </li>
 </ul>
</div>

Любая помощь приветствуется.

Answer 1

Я бы использовал for...of l oop и переместил бы обратный вызов в l oop. Таким образом, вы можете получить доступ к итератору:

 for(const button of buttonArray){
    button.addEventListener('click', function runUpdate() {
      const { data } = button.dataset;
      //...         
    });
 }

Answer 2

Это JS эквивалент вашего jQuery (он просто заменяет вызовы jQuery их эквивалентными JS вызовами метода)

var buttons = document.querySelectorAll('#thePaginator li a');
for(var index = 0; index < $buttons.length; index++) {
  var button = buttons[index];
  button.addEventListener("click", function(evt) {
    var newPage = this.dataset.page;
    document.getElementById('attribute-myAttribute').value = newPage;
    document.getElementById('update').click();
  })
}