Прохождение через JQuery дает мне неопределенный

Question

Когда я нажимаю .getdata, я хочу перейти от .getdata к name=top и прочитать значение любого выбранного параметра (в данном случае это 0), но мне трудно добраться до него,Я продолжаю становиться неопределенным.

Это мой HTML.div class="main" повторяется, поэтому я не могу просто выбрать input[name=top].Это должно быть через обход дерева до ближайшего input[name=top].Может кто-то понять это правильно?Я начинаю думать, что это ошибка браузера, потому что я пробовал разные варианты, и все дают мне неопределенные.

<div class="main">
   <div class="branch">
       <div class="element">
          <label>top color:</label>
          <input type="radio" value="1" name="top">black
          <input type="radio" value="0" name="top" checked="checked">white
          <input type="radio" value="null" name="top">transparent
       </div>
   </div>
   <div class="controls">
      <a class="getdata">get data</a>
   </div>           
</div>

<div class="main">
....    
</div>

Answer 1

$('a.getdata').click(function() {
    var val = $(this).closest('.main').find('input[name="top"]:checked').val();
});

• Поместите событие click() ^{(документы)} на элемент <a>

• При клике используйте метод closest() ^{(документы)} , чтобы перейти к элементу .main

• Затем используйте метод find() ^{(документы)} вместе с attribute-equals-selector ^{(документы)} и checked-selector ^{(документы)} для получения проверенного name="top" радио.

• Наконец, используйте метод val() ^{(документы)} , чтобы получить его значение.

Answer 2

$(".getdata").click(function(){
        selectedValue=$(this).parent().prev().children().children("input[name=top]:checked").val();
        console.log(selectedValue);
});