Найти ближайший пролет с определенным классом внутри div

Question

Я хочу найти ближайший span с классом error_span. Как я могу это сделать с помощью jQuery?

<div class="form-group row"> 
    <div class="col-sm-4"> 
     <label for="reimburse_price" class="control label">Amount</label> 
    </div> 
    <div class="col-sm-8"> 
     <div> 
      <input type="text" name="reimburse_price" min="1" placeholder='0.00' class="form-control numberOnly" id="reimburse_price" required>   
     </div> 
     <div> 
      <span class="small text-danger error_span"></span>  
     </div> 
    </div> 
</div> 

Мой Javascript здесь

$("#reimburse_price").blur(function(){ 
    checkNumInput("#reimburse_price"); 
}); 

Моя функция JQuery здесь

function checkNumInput(id){ 
    if ($(id).val() == "") { 
     $(id)[0].setCustomValidity('Please fill out this field'); 
     $(id).closest("span .error_span").text("Please fill out this field").removeClass("hidden").addClass("text-danger"); 
    } 
} 

Answer 1

Проблема с текущим кодом является то, что closest() смотрит на родительских элементов, тем не менее span вы хотите find является дочерним по отношению к родительскому брату до input.

Чтобы решить вашу проблему, перейдите к общему родительскому объекту как input, так и span и используйте find() оттуда. Попробуйте следующее:

$("#reimburse_price").blur(function() { 
    checkNumInput('#' + this.id); 
}); 

function checkNumInput(id) { 
    var $input = $(id); 
    if ($input.val() == "") { 
     $input.get(0).setCustomValidity('Please fill out this field'); 
     $input.closest('.form-group').find('.error_span').text("Please fill out this field").toggleClass("hidden text-danger"); 
    } 
}