Прокрутите таблицу, чтобы найти конкретные идентификаторы

У меня есть таблица, в которую я пытаюсь вставить кнопку PayPal в последнюю ячейку таблицы, которая пуста. Я не уверен, сколько строк будет в таблице, и теперь у меня есть жестко закодированный идентификатор, который работает. Идентификатор начинается с el и числа для каждой строки, затем _qryMyReservedSlots_Payment.

['#el1_qryMyReservedSlots_Payment', '#el2_qryMyReservedSlots_Payment', '#el3_qryMyReservedSlots_Payment'].forEach(function(selector) {
        paypal.Button.render({ 
        ...paypal code...
        });
});

чтобы быть более эффективным, как я могу циклически перебирать идентификаторы, чтобы мне не приходилось их жестко кодировать?
Скотт


javascript loops
person ready4data    schedule 28.03.2018    source источник
comment
Поделитесь, пожалуйста, разметкой   -  person gurvinder372    schedule 28.03.2018
comment
Попробуйте document.querySelectorAll('[id^=el]').forEach...   -  person LordAlpaca    schedule 28.03.2018

Ответы (3)


arrow_upward
0
arrow_downward

Я не уверен, сколько строк будет в таблице, и теперь у меня есть жестко закодированный идентификатор, который работает

Используйте querySelectorAll и атрибут содержит селектор - *

var allRows = document.querySelectorAll( "tr[id*='qryMyReservedSlots_Payment']");
Array.from( allRows ).forEach( function(rowElement){
  //logic with rowElement
})
person gurvinder372    schedule 28.03.2018
comment
Спасибо. Сработала небольшая модификация document.querySelectorAll(span[id*='qryMyReservedSlots_Payment']).forEach(function(selector) { - person ready4data; 28.03.2018

arrow_upward
0
arrow_downward

Используйте цикл for:

for (var el = 1; el < 4; el++) {
    var selector = `#el${el}_qryMyReservedSlots_Payment`
    ...
}

или более старомодно:

for (var el = 1; el < 4; el++) {
    var selector = '#el' + el + '_qryMyReservedSlots_Payment'
    ...
}
person Thomas Edwards    schedule 28.03.2018

arrow_upward
0
arrow_downward

Вам нужно, чтобы они имели уникальные идентификаторы? Вы должны дать им класс, а затем сделать что-то вроде document.getElementsByClassName(className).forEach(...).

Если вы настаиваете на наличии уникальных идентификаторов (что, опять же, не нужно, и это как раз одна из причин, по которой у нас есть классы), ваш может быть примерно таким:

while (document.getElementById(`el${ counter++ }_qryMyReservedSlots_Payment`)) {
  paypal.Button.render({ 
    ...paypal code...
  });
}

Опять же, это нехорошо, потому что каждый раз, когда вы запрашиваете идентификатор, вы попадаете в DOM. Вы действительно должны получить все это сразу, манипулировать в памяти, а затем зафиксировать все свои изменения с помощью как можно меньшего количества вызовов DOM.

person Milan Adamovsky    schedule 28.03.2018