Как использовать Jquery для выбора нескольких форм и их дочерних элементов и оповещения об их значениях?

Question

Вот как далеко я прошел:

  $('form').each(function() {
    $(this).submit(function() {
      event.preventDefault()
      $(this).children('input.required').each(function() {
        alert($(this).val())
      })
    })
  })

Event.preventDefault () работает, потому что форма не отправляется. Но после этого он ничего не сделает. Я попробовал это

alert($(this).attr('id'))

прямо под

$(this).submit(function() {

и это тоже сработало, оно сообщило правильный идентификатор формы, когда я нажал на кнопку отправить. Но по какой-то причине я просто не могу заставить детей работать. После некоторого чтения я также попробовал

 $('form').each(function(index,element) {
    $(element).submit(function() {
      event.preventDefault()
      $(element).children('.required').each(function(ind,ele) {
        alert($(ele).val())
      })
    })
  })

но это тоже не сработало.

Мне нужно выбрать конкретные входные данные с помощью «требуемого» класса, чтобы проверить их значение. Спасибо.

Answer 1

Моя ставка в том, что ваши input элементы не являются дочерними узлами form, а являются потомками. То есть в дереве есть другие узлы между form и input, возможно, table или p элементами.

Вы должны использовать find вместо:

$(element).find('.required').each(function() {
    alert($(this).val());
});

Находит все узлы-потомки, соответствующие селектору, а не только дочерние.