Как получить значение jquery в выбранном блоке?

217

12 декабря 2016, 10:09

Ребят, всем привет. Есть такая верстка:

<div class="product_list">
<input type="hidden" value="1" name="id"/>
<button class="add_cart">Добавить<span></span></button>
</div>
<div class="product_list">
<input type="hidden" value="2" name="id"/>
<button class="add_cart">Добавить<span></span></button>
</div>
<div class="product_list">
<input type="hidden" value="3" name="id"/>
<button class="add_cart">Добавить<span></span></button>
</div>

Когда нажимаю на "добавить", я хочу получить значение inputa name='id'. Как это реализовать из данной верстке?

Answer 1

$(document).on('click', '.add_cart', function() {
    var id = $(this).prev().val();
    alert(id);
});

или если вёрстка таки поменяется

$(document).on('click', '.add_cart', function() {
    var id = $(this).closest('.product_list').find('input[name="id"]').val();
    alert(id);
});

Answer 2

jsfiddle.net/30dw5ncs/

Вот оптимальнее вариант, на родном JS

jsfiddle.net/30dw5ncs/1/

$('.add_cart').on('click', function(){ 
    var id = this.previousElementSibling.value; 
     
    alert(id); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="product_list"> 
<input type="hidden" value="1" name="id"/> 
<button class="add_cart">Добавить<span></span></button> 
</div> 
 
<div class="product_list"> 
<input type="hidden" value="2" name="id"/> 
<button class="add_cart">Добавить<span></span></button> 
</div> 
 
<div class="product_list"> 
<input type="hidden" value="3" name="id"/> 
<button class="add_cart">Добавить<span></span></button> 
</div>