Проблема с ближайшим JQuery

Question

Я хотел бы, чтобы диапазон классов .alpha был выбран с помощью ближайшего селектора и числа внутри этого, чтобы изменить, но я не могу заставить это работать.

HTML

<h4> 
    <span class="c1-rgba"></span> 
    <span class="alpha">0.0</span> 
    <input class="increaseAlpha" type="button" name="increase" value="+"> 
    <input class="decreaseAlpha" type="button" name="decrease" value="-"> 
</h4> 

JQuery

$(function() { 
    $(".increaseAlpha").click(function() { 
     $(this).closest('span').text( (Math.min(1, Number($(".alpha").text()) + 0.1)).toFixed(1)) 
    }); 
}); 

Answer 1

.alpha не самый близкий элемент .increaseAlpha. Это родной брат .increaseAlpha. Попробуйте использовать метод siblings().

$(".increaseAlpha").click(function() { 
 
    var alpha = $(this).siblings('span.alpha'); 
 
    alpha.text((Math.min(1, Number(alpha.text()) + 0.1)).toFixed(1)) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4> 
 
    <span class="c1-rgba"></span> 
 
    <span class="alpha">0.0</span> 
 
    <input class="increaseAlpha" type="button" name="increase" value="+"> 
 
    <input class="decreaseAlpha" type="button" name="decrease" value="-"> 
 
</h4>