jQuery - 特定の要素の部分IDを持つ要素を見つけるにはどうすればいいですか

Question

私は同じフィールドを持つ複数のレコードを持っていますが、それらはすべて同じ名前/ IDとRecordIDを持っています。 cmdUpdate_xxxを押すと、レコードdivを検出し、 'fldTarget'に割り当てます。私は各フィールド（20、手動でこれをやりたいとは思わない）をチェックして、有効性を確認したいと思っています。私は

$('#RecordsWrapper') 
    .on("click" , "[id*=cmdUpdate]", "input", function(e){ 
     fldTarget = $(this); 
     fldAccountID = fldTarget.parent().find("#txtAccountID").prop("id");` 
    }) 

を試してみた...しかしfldAccountIDはundefinedとして戻ってきます。 'Record001' divの下に 'txtAccountID'を含むIDを持つサブ要素を見つけるにはどうすればよいですか？

<div id='RecordsWrapper'> 
<div id='Record001'> 
    <input type='text' id='txtAccount_001'> 
    <input type='text' id='txtEntry_001'> 
    <input type='text' id='txtValue_001'> 
    <input type='submit' id='cmdUpdate_001'> 
</div> 
<div id='Record002'> 
    <input type='text' id='txtAccount_002'> 
    <input type='text' id='txtEntry_002'> 
    <input type='text' id='txtValue_002'> 
    <input type='submit' id='cmdUpdate_002'> 
</div> 
</div> 

Answer 1

使用属性セレクタ：

属性セレクタ

属性セレクタ指定された属性または属性値の存在を使用して要素を選択します。

REF：https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

REF（ここではより多くの例）：すでにfldTargetに保存されている現在のレコードのdiv要素を持っているのでhttps://www.w3schools.com/css/css_attribute_selectors.asp

$('input[id^=txtEntry]').css('background', 'green'); 
 

 

 
$('#RecordsWrapper') 
 
    .on("click", "input[id^=cmdUpdate]", "input", function(e) { 
 
    fldTarget = $(this); 
 
    fldAccountID = fldTarget.parent().find("input[id^=txtAccount]").prop("id"); 
 
    console.log('fldAccountID-->' + fldAccountID); 
 
    })

input[id^=txtAccount] { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='RecordsWrapper'> 
 
    <div id='Record001'> 
 
    <input type='text' id='txtAccount_001'> 
 
    <input type='text' id='txtEntry_001'> 
 
    <input type='text' id='txtValue_001'> 
 
    <input type='submit' id='cmdUpdate_001'> 
 
    </div> 
 
    <div id='Record002'> 
 
    <input type='text' id='txtAccount_002'> 
 
    <input type='text' id='txtEntry_002'> 
 
    <input type='text' id='txtValue_002'> 
 
    <input type='submit' id='cmdUpdate_002'> 
 
    </div> 
 
</div>

Answer 2

あなたが解析できますそのdivのIDからのレコードID？

たとえば、

var recordID = fldTarget.prop('id').replace('Record', ''); 
var txtAccountID = 'txtAccount_' + recordID; 

---

それとも、このようなID num個含まれて保持するために、それぞれ「記録」のdivのためdata-*属性を追加することができます。

<div id='Record001' data-id="001"> 
    <input type='text' id='txtAccount_001'> 
    <input type='text' id='txtEntry_001'> 
    <input type='text' id='txtValue_001'> 
    <input type='submit' id='cmdUpdate_001'> 
</div> 
<div id='Record002' data-id="002"> 
    <input type='text' id='txtAccount_002'> 
    <input type='text' id='txtEntry_002'> 
    <input type='text' id='txtValue_002'> 
    <input type='submit' id='cmdUpdate_002'> 
</div> 

そして、このようにその属性から値を取得：

を

var recordID = fldTarget.data('id'); 
var txtAccountID = 'txtAccount_' + recordID;