Jquery match different id with the last same number

user_16524238 0
Viewed 38

I have example html code like this :

    <select id="label_1">
        <option></option>
    </select>
    <select id="item_1">
        <option></option>
    </select>

    <select id="label_2">
        <option></option>
    </select>
    <select id="item_2">
        <option></option>
    </select>

How do I make a jquery code to match the label and item id with the same number ?

    if($("#label_" + [/[0-9]+$/]) == $("#item_" + [/[0-9]+$/])) {
        //do something
    }
html jquery
2 Answers

You can find all the label elements first and then iterate them to find the matching item elements

$("select[id^='label_']").each((_, label) => {
  const idSuffix = label.id.split("_").pop();
  const item = $(`#item_${idSuffix}`);

  // now you have both `label` and `item`
});

The vanilla JS version isn't much different

document.querySelectorAll("select[id^='label_']").forEach((label) => {
  const idSuffix = label.id.split("_").pop();
  const item = document.getElementById(`item_${idSuffix}`);

  // now you have both `label` and `item`
});
user_2833660

If you want to do one time : return false

$.each($("select[id^= 'label_']"), function(){
  let num = this.id.replace('label_', '')
  let equal = $(this).value ===  $("#item_" + num).value
  if(equal) {
    // do something
    
    // if you want to run one times ( return false)
    return false
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="label_1">
  <option value="1" selected>1</option>
</select>
<select id="item_1">
  <option value="1" selected>1</option>
</select>

<select id="label_2">
  <option value="2" selected>2</option>
</select>
<select id="item_2">
  <option value="2" selected>2</option>
</select>

user_68616830
Related