Wrote a function that looks for input and assigns a css property to a label next to it. The function, instead of alternately searching for all inputs and adjacent labels, takes the very first input, divides its width by 2.35, and assigns the first input value to all the labels.

$(function() { var input = $('.input-holder input'); var width = input.width(); var label = ('.input-holder input + label'); label.css('left', width / 2.35); });

HTML:

 <div class="input-holder col-sm-6 col-md-3 col-xs-12"> <input id="takeoff_place" class="place focus-input" type="text"> <label for="takeoff_place" class="place-label">Пункт отправки</label> <i class="material-icons">flight_takeoff</i> </div>

How to fix it?

  • one
    var label = ('.input-holder input + label'); doesn't the var label = $('.input-holder input + label'); ! - HamSter

1 answer 1

 $(function() { var input = $('.input-holder input'); var width = input.width(); var label = $('.input-holder label'); label.css({ 'left': width / 50, 'color': 'red' }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-holder col-sm-6 col-md-3 col-xs-12"> <input id="takeoff_place" class="place focus-input" type="text"> <label for="takeoff_place" class="place-label">Пункт отправки</label> <i class="material-icons">flight_takeoff</i> </div>