如何从跨度和绑定更改事件中选择子div中的上一个输入元素？

Question

The HTML structure in question looks as follows:

<div class="form-group form-text">
  <div class="input-group">
    <span class="input-group-btn">
      <div id="47" class="btn btn-danger input-xs remove-farming-action">
        <span class="glyphicon glyphicon-remove"></span>
      </div>
    </span>
    <input id="action_CropCount" 
           class="form-control input-xs numeric-text-box crop-counter-textbox" 
           type="number" 
           value="8" 
           name="action.CropCount" 
           min="1" 
           max="999">
  </div>
  Aubergine Violetta lunga 3
  <span class="crop-count-crop-word">crop(s)</span>
  <br>
</div>
(... And so on for different items.)

So this is a list of form-groups which all have an input field where a value can be selected and a span-field with a text in it. What I want to do is change the "crop-count-crop-word" text when the input field with class "crop-counter-textbox" is 1 (from plural to non-plural). The challenge is that the span element next to the input box must change, not all others.

The solution I chose (if there is a better one let me know) is to use JavaScript to select input field and bind a change event to it as follows:

makeCropPluralWhenCropCountIsBiggerThan1: function() {
    // Every crop count input field needs a span label with crop or crops depending on the count.
    $('.crop-count-crop-word').prev('input').change(function() {
        $(this).next('span').text( $(this).val() == 1 ? 'crop' : 'crops' );
    });
    // Ensure text is correct on load by triggering change event.
    $('.crop-count-crop-word').prev('input').trigger('change');
}

Unfortunately this does not work. I do not manage to select the previous input field from the span element. No item is selected.

Can anyone tell how to select the "crop-count-crop-word" span which is next from the input with class "crop-counter-textbox"?

/Edit here is a Fiddle: https://jsfiddle.net/4ftx1b2b/1/

Answer 1

You can select it directly:

$(".crop-counter-textbox").change(function(e){});

or from your span

$('span.crop-count-crop-word').prev(".input-group").find("input.crop-counter-textbox").change(function(e){});

.prev selets at the same level, but at the same level there is a div.input-group and not your input.crop-counter-textbox, that's why your selector does not find it.

Answer 2

You are trying to select previous input element but there is actually a div element with the input inside it. So you need to change $('.crop-count-crop-word').prev('input') to $('.crop-count-crop-word').prev('.input-group').find('input') .

Edited your code ( fiddle ):

function makeCropPluralWhenCropCountIsBiggerThan1() {
// Every crop count input field needs a span label with crop or crops depending on the count.
$('.form-group').each(function() {
    var $input = $(this).find('input:first');
    var $span = $(this).find('.crop-count-crop-word:first');
    $input.change(function() {
        $span.text( $(this).val() == 1 ? 'crop' : 'crops' );
        $input.trigger('change');
    });        
});

}