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

Question

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

Рейтинг: 0Ответов: 2Опубликовано: 27.03.2015

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

<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'. Как это реализовать из данной верстке?

javascript html jquery

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

$(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

▲ 1

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>

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

Ответы