访问活动元素的特定HTML元素

Question

我需要关于jQuery（或JavaScript）的帮助。我有一个与三个复选框相似的元素的表单。想要获取通过AJAX形式发送数据的描述文本和输入值。 Ajax工作得很好，但我无法前往DOM来获取所需的数据。

$('.select-item').on('click', function() { 
 
\t 
 
    $(this).toggleClass('active'); 
 

 
}) 
 

 
var activeItems = $('.select-item.active'); 
 

 
for(var i = 0, l = activeItems.length; i < l; i++) { 
 

 
    console.log(activeItems[i].children[1]); 
 
    
 
    console.log(activeItems[i].children[2]); 
 

 
}

.select-item { 
 
    background-color: #f7f7f7; 
 
    margin-bottom: 20px; 
 
    padding: 15px; 
 
} 
 
.selector { 
 
    height: 20px; 
 
    width: 20px; 
 
    border: 1px solid blue; 
 
    position: relative; 
 
} 
 
.selector .circle { 
 
    height: 10px; 
 
    width: 10px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    opacity: 0; 
 
} 
 
.active .selector .circle { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="ticket-booking-form-1"> 
 
    <div class="select-item active"> 
 
     <!-- SELECTION ITEM --> 
 
     <div class="selector"> 
 
      <div class="circle"></div> 
 
     </div> 
 
     <div class="description"> 
 
      \t <h4 class="title-text">Day 1 Full Day Ticket <span class="text-color">$129</span></h4> 
 

 
     </div> 
 
     <div class="select-input"> 
 
      <label for="qty-1">QTY</label> 
 
      <input type="text" id="qty-1" name="qty-1" value="1" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="select-item"> 
 
     <!-- SELECTION ITEM --> 
 
     <div class="selector"> 
 
      <div class="circle"></div> 
 
     </div> 
 
     <div class="description"> 
 
      \t <h4 class="title-text">Day 1 Full Day Ticket <span class="text-color">$129</span></h4> 
 

 
     </div> 
 
     <div class="select-input"> 
 
      <label for="qty-1">QTY</label> 
 
      <input type="text" id="qty-1" name="qty-1" value="1" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="select-item"> 
 
     <!-- SELECTION ITEM --> 
 
     <div class="selector"> 
 
      <div class="circle"></div> 
 
     </div> 
 
     <div class="description"> 
 
      \t <h4 class="title-text">Day 1 Full Day Ticket <span class="text-color">$129</span></h4> 
 

 
     </div> 
 
     <div class="select-input"> 
 
      <label for="qty-1">QTY</label> 
 
      <input type="text" id="qty-1" name="qty-1" value="1" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <!-- /END SELECTION ITEM --> 
 
    <button type="submit" class="btn btn-base btn-lg"><span>Proceed to Checkout</span> 
 

 
    </button> 
 
</form>

的场景，说明文本和选择（选中）元素的输入值应该被添加到一个数组或对象然后我可以发送单个/两者/所有的选择的数据（有效）元素。其实我不擅长JS，所以如果你认为没有添加到数组或对象解决方案可以实现，完美！

http://jsfiddle.net/getanwar/t2d3sjmq/

一旦你看到小提琴就明白了我的问题。

Answer 1

要获得的有效输入值，用

for(var i = 0, l = activeItems.length; i < l; i++) { 
    console.log(activeItems[i].children[2].children[1].value); 
} 

与jQuery你可以使用类似

$('.select-item.active > .select-input').each(function(index,element){ 
    console.log($(this).find('input').attr('value')); 
});