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 返回为 未定义。如何找到“Record001”div 下 ID 包含“txtAccountID”的子元素？

<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

使用属性选择器:

Attribute selectors

Attribute selectors select an element using the presence of a given attribute or attribute value.

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

REF (more example here): 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>