jQuery: присвойте каждому полю формы хронологически возрастающее число

Question

Существует динамически генерируемая форма. Для каждого поля ввода формы («.questions»). Я хотел бы показать номер поля (хронологический). Таким образом, первое поле показывает 1, второе 2 и так далее.

Я думаю, что я почти получил его в этом коде, но теперь он дает каждому элементу каждое число, поэтому поле ввода один = 1234 и два = 1234, где он должен быть один = 1 два = 2.

$('.questions').each(function(index) {
     var num = index + 1;  
     ('<p class="num">'+num+'</p>').insertBefore('.questions'); 
});

теперь все работает правильно:

$('.questions').each(function(index) {
     var num = index + 1;  
     ('<p class="num">'+num+'</p>').insertBefore(this); 
});

Answer 1

Или вы можете использовать

$('.questions').each(function(index) {
 var num = index + 1;  
 $('<p class="num">'+num+'</p>').insertBefore($(this));
});

Проблема в том, что когда вы используете метод insertBefore, вы снова выбираете все элементы, используя селектор «.questions». В то время как вы действительно хотите вставить его непосредственно перед текущим элементом, который представлен объектом $ (this) jquery.

Answer 2

Проблема заключается в объявлении числа внутри функции обратного вызова каждого из них. Переместите объявление num за пределы обратного вызова.

Попробуйте это:

var num = 0;
$('.questions').each(function(index) {      
    num = index + 1;        
    $('<p class="num">'+num+'</p>').insertBefore(this);  
});