javascript - 移动到事件元素的特定 HTML 元素

Question

我需要 jQuery(或 JavaScript)方面的帮助。我有一个包含三个复选框类似元素的表单。想要获取描述文本和输入值以通过 AJAX 表单发送数据。 Ajax 工作得很好，但我无法前往 DOM 来获取我想要的数据。

$('.select-item').on('click', function() {
	
   $(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">
            	<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">
            	<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">
            	<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/

一旦你看到 fiddle 就会明白我的问题。

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') );
});