Clash Royale CLAN TAG#URR8PPP

Target `label` tag next to `input` using jQuery

I'm trying to target the label using .closest('label'), .next('label') to target the label. What am I missing?

.closest('label')

.next('label')

label

$('input').on('focus', function()
$(this).parent().addClass('textblock');
$(this).next('label').css('top', '-27px');
console.log('hello');
);

$('input').on('blur', function()
if ($(this).val() == '')
$(this).parent().removeClass('textblock');
$(this).next('label').css('top', '11px');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="text" class="form-control not-required" name="portfolio_link" value="">
<span class="bar"></span>
<label for="portfolio_link" class="input-empty">Portfolio Link</label>
</div>

3 Answers
3

next() will target next sibling, so

next()

You can use:

$(this).parent().find('label');


Also, you can target directly:

$('.input-empty').css('top', '-27px');


$('input').on('focus', function()
$(this).parent().addClass('textblock');
$(this).parent().find('label').css('top', '-27px');
console.log('hello');
);

$('input').on('blur', function()
if($(this).val() == '')
$(this).parent().removeClass('textblock');
$(this).parent().find('label').css('top', '11px');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="text" class="form-control not-required" name="portfolio_link" value="">
<span class="bar"></span>
<label for="portfolio_link" class="input-empty">Portfolio Link</label>
</div>

.parent

.closest

next() won't work because it targets the immediately following sibling, but the immediately following sibling of the input in your example is the span. You can use siblings() instead:

next()

input

span

siblings()

$('input').on('focus', function()
$(this).parent().addClass('textblock');
$(this).siblings('label').css('top', '-27px');
console.log('hello');
);

$('input').on('blur', function()
if($(this).val() == '')
$(this).parent().removeClass('textblock');
$(this).siblings('label').css('top', '11px');
);

.form-group
margin-top:30px;

label
position:relative;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="text" class="form-control not-required" name="portfolio_link" value="">
<span class="bar"></span>
<label for="portfolio_link" class="input-empty">Portfolio Link</label>
</div>

siblings()

parent()

closest()

If you want to always target the respective label for an input, you can query it via the name attribute of the affected input element:

label

input

name

input

$('input').on('focus', function()
$(this).parent().addClass('textblock');
$('label[for="' + $(this).attr('name') + '"]').css('top', '-27px');
console.log('hello');
);

$('input').on('blur', function()
if ($(this).val() === '')
$(this).parent().removeClass('textblock');
$('label[for="' + $(this).attr('name') + '"]').css('top', '11px');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="text" class="form-control not-required" name="portfolio_link" value="">
<span class="bar"></span>
<label for="portfolio_link" class="input-empty">Portfolio Link</label>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.