Question

This code feels very repetitive, and I am sure there is a more efficient way to write it. Any help would be much appreciated.

jQuery:

$(function(){

      $('.perry_1_txt').keyup(function(){
         $('.perry_1').text($(this).val());
      });

      $('.perry_2_txt').keyup(function(){
         $('.perry_2').text($(this).val());
      });

      $('.perry_3_txt').keyup(function(){
         $('.perry_3').text($(this).val());
      });

      $('.perry_4_txt').keyup(function(){
         $('.perry_4').text($(this).val());
      });

      $('.perry_5_txt').keyup(function(){
         $('.perry_5').text($(this).val());
      });

      $('.perry_6_txt').keyup(function(){
         $('.perry_6').text($(this).val());
      });     

});

HTML:

<div>
<input class="perry_1_txt" /><span class="perry_1"></span>
<input class="perry_2_txt" /><span class="perry_2"></span>
<input class="perry_3_txt" /><span class="perry_3"></span>
<input class="perry_4_txt" /><span class="perry_4"></span>
<input class="perry_5_txt" /><span class="perry_5"></span>
<input class="perry_6_txt" /><span class="perry_6"></span>
<input class="perry_7_txt" /><span class="perry_7"></span>
</div>

The code dynamically takes the value from the inputs and places them in the corresponding span. It works fine, but it less than elegant.

Answer 1

Use fewer class names, and store the index somewhere else.

HTML

<input class="perry_txt" data-index="1"/>
<input class="perry_txt" data-index="2"/>
<input class="perry_txt" data-index="3"/>
<!-- etc. -->

JavaScript

$(function ()
{
    $('.perry_txt').keyup(function ()
    {
        var $this = $(this),
            i = $this.data('index');

        $('.perry_' + i).text($this.val());
    });
});

---

Edit

Okay, so you’ve shown some HTML. We can do even better, and don’t need a single class name:

HTML

<div id="parent">
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
    <input /><span></span>
</div>

JavaScript

$(function ()
{
    $('#parent').on('keyup', 'input', function ()
    {
        var $this = $(this);
        $this.next().text($this.val());
    });
});