複数の入力セレクタに単一のスクリプトを使用

Question

複数のID（keyboard1、keyboard2、keyboard3など）ではなく、複数のIDで1つのIDのみを持つように、以下のコードを変更したいとします。

複数の入力ボックスにスクリプトを使用する必要があります。

<div class="col-md-6 mt-20 flip"> 
    <div class="input-group"> 
     <input id="search_field" type="text" id="" class="search_field form-control"> 
     <span class="input-group-addon key-show"><i class="fa fa-keyboard-o"></i></span> 
    </div> 
    <div id="keyboard" class="keyboard show-allkey"></div> 
</div> 

<div class="col-md-6 mt-20 flip"> 
    <div class="input-group"> 
     <input id="search_field1" type="text" id="" class="search_field form-control"> 
     <span class="input-group-addon key-show"><i class="fa fa-keyboard-o"></i></span> 
    </div> 
    <div id="keyboard1" class="keyboard show-allkey"></div> 
</div> 
<div class="col-md-6 mt-20 flip"> 
    <div class="input-group"> 
     <input id="search_field2" type="text" id="" class="search_field form-control"> 
     <span class="input-group-addon key-show"><i class="fa fa-keyboard-o"></i></span> 
    </div> 
    <div id="keyboard2" class="keyboard show-allkey"></div> 
</div> 

$('#keyboard').jkeyboard({  
    layout: "english", 
    input: $('#search_field') 
}); 
$('#keyboard1').jkeyboard({  
    layout: "english", 
    input: $('#search_field1') 
}); 
$('#keyboard2').jkeyboard({  
    layout: "english", 
    input: $('#search_field2') 
}); 

私のデモのURL：このようなhttps://rawgit.com/saravanasksp/jkeyboard/master/index.html

Answer 1

ループeachループ内のクラスを超えます。これにより個々のインスタンスが公開され、関連する検索フィールドを取得するためにトラバースできるようになります

$('.keyboard').each(function() { 
    const $input = $(this) 
    $input.jkeyboard({ 
    layout: "english", 
    input: $input.prev().find('.search_field') 
    });  
}); 

Answer 2

何かがそれを行う必要があります。

$('.keyboard').each(function() { 
    $(this).jkeyboard({ 
     layout: "english", 
     input: $(this).prev('.input-group').find('.search_field'); 
    }); 
});