I want to find the closest span with class error_span. How can I do that using 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>

My javascript is here

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

My jquery function is here

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

I want to find the closest span with class error_span. How can I do that using 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>

My javascript is here

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

My jquery function is here

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

• javascript
• jquery
• html

• 1 Closest parent or child? And closest relative to which element? – Rory McCrossan Commented Sep 12, 2016 at 15:56
• Closest relative to? – Joseph Commented Sep 12, 2016 at 15:57
• Relative to which element? – The One and Only ChemistryBlob Commented Sep 12, 2016 at 15:57
• 1 Assuming you want to get the span for the input $(this).parent().closest('div').find('error_span') – Tushar Commented Sep 12, 2016 at 15:58
• what u try so far? – The One and Only ChemistryBlob Commented Sep 12, 2016 at 15:58

1 Answer 1

The issue with your current code is that closest() looks at parent elements, yet the span you want to find is a child of a parent's sibling to the input.

To solve your issue traverse to a mon parent of both the input and span and use find() from there. Try this:

$("#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");
    }
}