How does jQuery get the relevant value when the button is clicked?

Just look at the code without talking nonsense!
I mentioned the code below in another blog, you can click the link on the right to get a detailed explanation
OLD

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="col-md-3 py-5">
    <button type="button" class="btn bg-light border rounded-circle" id="minus"><i class="fas fa fa-minus" ></i></button>
    <input type="text" id="plus_minus_quantity" value="1" class="form-controls w-25 d-inline">
    <button type="button" class="btn bg-light border rounded-circle" id="plus"> <i class="fas fa fa-plus" ></i></button>
    <button type="button" id="save"  value="">SAVE</button>
</div>
<div class="col-md-3 py-5">
    <button type="button" class="btn bg-light border rounded-circle" id="minus"><i class="fas fa fa-minus" ></i></button>
    <input type="text" id="plus_minus_quantity" value="1" class="form-controls w-25 d-inline">
    <button type="button" class="btn bg-light border rounded-circle" id="plus"> <i class="fas fa fa-plus" ></i></button>
    <button type="button" id="save"  value="">SAVE</button>
</div>
</body>
</html>

$('div button i.fa-plus').parent().click(function(){
    
    
        let last_value = $(this).parent().children("input").val();
        last_value++;
        $(this).parent().children("input").val(last_value);
    });
    $('div button i.fa-minus').parent().click(function(){
    
    
        let last_value = $(this).parent().children("input").val();
        if(last_value <= 1) return;
        last_value--;
        $(this).parent().children("input").val(last_value);
    });


    $(document).ready(function () {
    
    
        $(document).on('click','#save',function () {
    
    
            // Changed this line to reference the sibling of the button that was clicked
            let value= $(this).siblings('#plus_minus_quantity').val();
            let id = $(this).attr("value");
            // console.log(value);
            alert(value);

        });

    })

In the above method, the save button is in the entire div, but what if the save button exists alone in the div?
Please see the difference between the code below
and the above code is the layout of the div and the way of obtaining js
NEW

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="col-md-3 py-5">
    <button type="button" class="btn bg-light border rounded-circle" id="minus"><i class="fas fa fa-minus" ></i></button>
    <input type="text" id="plus_minus_quantity" value="1" class="form-controls w-25 d-inline">
    <button type="button" class="btn bg-light border rounded-circle" id="plus"> <i class="fas fa fa-plus" ></i></button>
</div>
<div> <button type="button" id="save"  value="">SAVE</button></div>
<div class="col-md-3 py-5">
    <button type="button" class="btn bg-light border rounded-circle" id="minus"><i class="fas fa fa-minus" ></i></button>
    <input type="text" id="plus_minus_quantity" value="1" class="form-controls w-25 d-inline">
    <button type="button" class="btn bg-light border rounded-circle" id="plus"> <i class="fas fa fa-plus" ></i></button>
</div>
<div><button type="button" id="save"  value="">SAVE</button></div>
</body>
</html>

$('div button i.fa-plus').parent().click(function(){
    
    
        let last_value = $(this).parent().children("input").val();
        last_value++;
        $(this).parent().children("input").val(last_value);
    });
    $('div button i.fa-minus').parent().click(function(){
    
    
        let last_value = $(this).parent().children("input").val();
        if(last_value <= 1) return;
        last_value--;
        $(this).parent().children("input").val(last_value);
    });


    $(document).ready(function () {
    
    
        $(document).on('click','#save',function () {
    
    
            
            let value=$(this).parent().prev().children('#plus_minus_quantity').val();
            let id = $(this).attr("value");
            // console.log(value);
            alert(value);

        });

    })

let value=$(this).parent().prev().children('#plus_minus_quantity').val();

$(this) //表明当前的#save button
$(this).parent()//表明当前 #save button 的父亲，就是<div>
$(this).parent().prev()//表明当前 #save button 的父亲的前者，就是<div>的前者也是<div>
$(this).parent().prev().children('#plus_minus_quantity')
//表明当前 #save button 的父亲的前者的子元素当中获取所想要的id
$(this).parent().prev().children('#plus_minus_quantity').val()
//这个就获取值的意思

How does jQuery get the relevant value when the button is clicked?

Guess you like