最も近い入力フィールドの値とIDを取得する

Question

私は編集アイコンを持っています。このアイコンをクリックすると、メソッドが呼び出されます。このメソッドでは、値とID属性の値が必要になります。 私はjqueryでいくつかの方法でこれを実行しようとしましたが、どちらもうまくいきませんでした。ここで

は私のhtmlです：スパンをクリックすると

<div class="col-sm-2"> 
    <div class="input-group"> 
     <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
     <div class="input-group-addon"> 
      <span onclick="editUserInfo()"><i class="fa fa-pencil" aria-hidden="true"></i></span> 
     </div> 
    </div> 
</div> 

、私は左に、入力フィールドの値を取得したいのですが、だけでなく、それがID（この場合は「電話」）です。

私が試したと動作しませんでした何を：

IDの場合：

$('selector').closest('[id]') 

値の場合：もちろん

$(this).parent().find('.form-control').val(); 

、私はそこの多くのバリエーションを試してみましたが、何も働かなかった（私はこれに非常に新しいです）。

Answer 1

クリックした現在の要素（onclick="editUserInfo(this)"を使用）を渡す必要があります。この方法で、その要素を関数内の参照として使用できます。それ以外の場合 - this変数はwindowオブジェクトを参照します（探しているものではありません）。

input.form-controlの中には、input-groupクラスを持つ親要素に行くことができます。

チェックこの例：最も近いを見つけることが

function editUserInfo(el) { 
 
    input_element = $(el).parents('.input-group').find('input.form-control'); 
 
    console.log(input_element.attr('id')); 
 
    console.log(input_element.val()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-2"> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
 
    <div class="input-group-addon"> 
 
     <span onclick="editUserInfo(this)"><i class="fa fa-pencil" aria-hidden="true">click</i></span> 
 
    </div> 
 
    </div> 
 
</div>

私は唯一の可視性のために<span>タグ内のclickテキストを追加...

Answer 2

使用最も近いです指定されたセレクタに一致する祖先 e属性equalsセレクタを使用して、指定された名前の入力を検索します。 例

<div class="options"> 
 
    <div class="phone"> 
 
    <label>Phone:</label> 
 
    <input type="text" name="phone" value="1"/> 
 
    </div>

var val = $(this).closest("div.options").find("input[name='phone']").val(); 

Answer 3

注、document内の要素のidは一意でなければなりません。 documentに1つの要素があり、その要素がid"phone"の場合は、単に$("#phone")を使用して要素を選択することができます。そうでなければ、その後、親.input-group-addon要素の前の兄弟である<input>要素を選択する

this.parentElement.previousElementSibling 

click".input-group span"内のイベントハンドラを使用し、<input>要素でidためclassに置き換えてください。

<input>要素のvalueは、htmlに設定されていません。

$(function() { 
 
    $(".input-group span").on("click", function() { 
 
    var input = $(this.parentElement.previousElementSibling); 
 
    var data = { 
 
     "id": input.attr("id"), // `.attr("class")` 
 
     "value": input.val() 
 
    }; 
 
    console.log(data); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-2"> 
 
    <div class="input-group"> 
 
    <!-- `id` should be unique, change to `class` if multiple `id` set to `"phone"` in `document` --> 
 
    <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly" value="123-456-7890"> 
 
    <div class="input-group-addon"> 
 
     <span><i class="fa fa-pencil" aria-hidden="true">click</i></span> 
 
    </div> 
 
    </div> 
 
</div>