How to make an event return first matched only using jQuery?

Question

I have a loop event with a matching condition. The problem is the matching can happen more than once. I only want the first matched result. This is some script:

    <div class='container_a'>
       <div class='user user_name' id="user_shipment_name">John</div>
       <div class='user user_type' id="user_shipment_type">Admin</div>
    </div>

   <div class='container_b'>
       <div class='user user_name' id="user_payroll_name">Ray</div>
       <div class='user user_type' id="user_payroll_type">Staff</div>
   </div>

The jQuery:

$(".user").each(function(i){
     var user_match = $(this).first().prop("id").split("_");
                    
     if("user_name" == user_match[0] && "user_type" == user_match[2]){
          // I'd like to return user_name John and user_type Admin here
     }              
});

I've use .first(), but still not get the desired output.

Current exact script used:

$(".isBilling").each(function(i){
                
                var input_type      = $(this)[0].tagName;
                var company_match   = $(this).prop("id").split("_");
                
                if(input_type == "SELECT"){
                    var val_billing_addr = $(this).find("option:selected").text();
                }
                else{
                    var val_billing_addr = $(this).val();
                }
                
                $(".billing").each(function(i){
                    var billing_match = $(this).first().prop("id").split("_");
                    
                    var default_addr = company_match[0] + "_" + company_match[2] + "_" + company_match[3];
                    var billing_addr = billing_match[0] + "_" + billing_match[2] + "_" + billing_match[3];
                    
                    if(default_addr == billing_addr){                           
                        $(this).val(val_billing_addr);              
                    }               
                });

                
            });

Hi try putting `return false;` inside `if-statement` so that loop will terminate onces match found . — Swati, Dec 06 '20 at 12:46
I am not sure what's wrong but you can see [here](https://jsfiddle.net/5yxrg78b/) it works . — Swati, Dec 06 '20 at 12:55

Lajos Arpad · Answer 1 · 2020-12-13T03:09:27.153

-1

Instead of .each() you can use a loop:

function foo() {
    for (let user of $(".user")) {
        var user_match = $(user).first().prop("id").split("_");
                    
        if("user_name" == user_match[0] && user_type[2] == user_match[2]){
             return {
                 user_name: user_match[0],
                 user_type: user_match[2]
             };
             // I'd like to return user_name John and user_type Admin here
        }              
    }
}

EDIT

Based on the comments it seems that we need to break from an .each() once a condition is met. We can achieve that by returning false:

            $(".billing").each(function(i){
                var billing_match = $(this).first().prop("id").split("_");
                
                var default_addr = company_match[0] + "_" + company_match[2] + "_" + company_match[3];
                var billing_addr = billing_match[0] + "_" + billing_match[2] + "_" + billing_match[3];
                
                if(default_addr == billing_addr){                           
                    $(this).val(val_billing_addr);
                    return false;              
                }               
            });

edited Dec 13 '20 at 03:09

answered Dec 06 '20 at 11:21

Lajos Arpad

64,414
37
100
175

I still got the last matched element – Vahn Dec 06 '20 at 11:35
@Vahn can you show the exact code you have? – Lajos Arpad Dec 06 '20 at 12:06
sure. I'll add it to m question – Vahn Dec 06 '20 at 12:14
@Vahn thank you. Can you also show how you attempted to apply the idea presented in this answer? Frankly, this should work, because that return statement in the foo function exits the loop when the first match is found and returns an object representing the match. – Lajos Arpad Dec 07 '20 at 12:12
well, you can check this fiddle https://jsfiddle.net/9mgey210/4/ – Vahn Dec 08 '20 at 06:47
@Vahn I do not know how you are "getting the last matched element". The Fiddle you have shared never calls the foo function. I have changed it to show you what the result of foo is: https://jsfiddle.net/jude7q3t/1/ – Lajos Arpad Dec 08 '20 at 12:27
@Vahn so, if you call foo and look at the stringified result, you see that user_type is addr. That's pointing to the very first input from the HTML, not the second. According to my understanding of the problem, that's the goal. If I misunderstood what the goal is or what you intend to achieve, then I kindly ask you to describe the goal of the code we are looking at, as I'm not sure I'm getting the aim of it. – Lajos Arpad Dec 08 '20 at 12:29
I have a container to store the matched value, but it's overwrited by next matched value – Vahn Dec 10 '20 at 06:27
@Vahn you have two calls for .each(). One for .isBilling and another for .billing. I'm confused about what is being overriden. Can you create a reproducible example (a snippet or a JSFiddle)? Please excuse me for the many questions I ask. – Lajos Arpad Dec 10 '20 at 09:44
Basically, my question is something like this https://stackoverflow.com/questions/29600036/jquery-skip-an-iteration-of-the-parent-loop-in-nested-each. – Vahn Dec 10 '20 at 10:24
If second loop get match, put value to a container > break the loop > continue parent loop > continue second loop > get match > put value to different container > break the loop > continue parent loop. – Vahn Dec 10 '20 at 10:28
my current script overwriting the container, because the second loop is continue and get another match – Vahn Dec 10 '20 at 10:29

How to make an event return first matched only using jQuery?

1 Answers1