how to add class in a specific input text element?

Question

I have a page with many inputs.

<form action="">

<div class="row">
<label for="texto">texto</label>
    <input type="text" class="nome">
    <span class="repositorio"><span class="efeito"></span></span>
</div>

<div class="row">
<label for="texto">password</label>
    <input type="password" class="email">
    <span class="repositorio"><span class="efeito"></span></span>
</div>
</form>

CSS goes something like this...

<style>
form{
    width: 200px;
    margin: 200px auto;
}
    .row{
        background-color: #999;

    }
    label{
        width: 100%;
        background-color: #099;
        display: block;
    }
    input.nome,
    input.email{
        height: 26px;
        width: 100%;
        border:none;
    }
    .repositorio{
        height: 2px;
        width: 100%;
        display: block;
        position: relative;
    }
.efeito{
    height: 100%;
    background-color: #f00;
    position: absolute; 
    left: 50%;
    right: 50%;
    transition:.5s;
}

.efeito.efeitoStart{
    left: 0; right: 0; 
}
</style>

and the jquery:

$( ".nome" ).focusin( function () {
$('.efeito').addClass("efeitoStart");
});
$( ".nome" ).focusout( function () {
$('.efeito').removeClass("efeitoStart");
});

Obviously this works, but applies the effect to all inputs, since the class that receives the effect is the same, either for any input.

I could apply an ID for each input, but as the system contains many elements, I believe it would not be cool a large JS file.

How could I apply the effect class only to the span of the clicked input?

Answer 1

I don’t know if this is the way you wanted it, but changing the dial you have when you apply the class, it works, look:

$( "input" ).focusin( function () {
	$(this).next().find('.efeito').addClass("efeitoStart");
});
$( "input" ).focusout( function () {
	$(this).next().find('.efeito').removeClass("efeitoStart");
});

form{
    width: 200px;
    margin: 200px auto;
}
    .row{
        background-color: #999;

    }
    label{
        width: 100%;
        background-color: #099;
        display: block;
    }
    input.nome,
    input.email{
        height: 26px;
        width: 100%;
        border:none;
    }
    .repositorio{
        height: 2px;
        width: 100%;
        display: block;
        position: relative;
    }
.efeito{
    height: 100%;
    background-color: #f00;
    position: absolute; 
    left: 50%;
    right: 50%;
    transition:.5s;
}

.efeito.efeitoStart{
    left: 0; right: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">

<div class="row">
<label for="texto">texto</label>
    <input type="text" class="nome">
    <span class="repositorio"><span class="efeito"></span></span>
</div>

<div class="row">
<label for="texto">password</label>
    <input type="password" class="email">
    <span class="repositorio"><span class="efeito"></span></span>
</div>
</form>

It is worth remembering that it became very specific. If you change the structure of those span's there, it won’t work anymore

Answer 2

It is also possible to apply this effect with pure CSS using the selector :focus(learn more), example:

form{
    width: 200px;
    margin: 200px auto;
}
.row{
  background-color: #999;
}
label{
  width: 100%;
  background-color: #099;
  display: block;
}
input.nome,
input.email{
  height: 26px;
  width: 100%;
  border:none;
}

.repositorio{
  height: 2px;
  width: 100%;
  display: block;
  position: relative;
}

input:focus ~ span.repositorio .efeito{
   left: 0; right: 0; 
 }

.efeito{
    height: 100%;
    background-color: #f00;
    position: absolute; 
    left: 50%;
    right: 50%;
    transition:.5s;
}

<form action="">
  <div class="row">
    <label for="texto">texto</label>
    <input type="text" class="nome">
    <span class="repositorio"><span class="efeito"></span></span>
  </div>

  <div class="row">
    <label for="texto">password</label>
    <input type="password" class="email">
    <span class="repositorio"><span class="efeito"></span></span>
  </div>
</form>