訪問活動元素的特定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')); 
});