javascript or jquery find nextSibling-CodePudding

I have a shopping cart view cart list count and this document

<div >
    <div  onclick="decrement_cart(this)">
         <span >-</span>
    </div>
    <input  type="number"
                                value="{{ $detail['product_quantity'] }}" min="0" max="1000">
    <div  onclick="increment_cart(this)">
         <span > </span>
    </div>
</div>

and I want to change the middle input value by clicking on increment/decrement div. note: I can not use addEventListener because this document is created by ajax.

how can I change input value by clicking that ?

function increment_cart(elem) {
     console.log(elem.closest('input'));
}

CodePudding user response：

There's no reason why you couldn't add the event handler using addEventListener. Even if the element you are trying to attach the handler is created dinamically after the document was loaded. But since you didn't specify anything in details about that point on time, all I could do was suggesting how to select the sibling elements from the event handler called the way you specified in your html code (with inline event handlers). Such approach is not very good because you can attach only one handler that way and it's not strictly bound to a clear scope but to a string that will be evaluated.

Anyway to strictly address your issue when trying to fetch the siblings, you should use .next() and .prev() (JQuery) to get the next and previous sibling.

But, since you where looking for a better solution, I showed you how to attach those functions as event handlers of the click events for all the .input-number-increment and .input-number-decrement using the attachHandlers function and how those handlers should deal with event.target to get a reference to the element triggering the event and how to reach the wanted elements from there using .closest() to retrieve the parent first and then .find() to grab the input among its children.

Here's a demo to show the concept (adding on top of your code):

//I'm calling the attachHandlers on page load (but you have to call it once the elements are created)
attachHandlers();

function attachHandlers(){
  $('.input-number-increment').on('click', increment_cart);
  $('.input-number-decrement').on('click', decrement_cart);
}

function increment_cart(event) {  
  //gets the element triggerring the event
  const target = event.currentTarget;
  //gets the input element, finding it among the children of .input-number.group parent
  const o = $(target).closest('.input-number-group').find('input');    
  const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val());    
  o.val( currValue 1 );
}

function decrement_cart(event) {
  //gets the element triggerring the event
  const target = event.currentTarget;
  //gets the input element, finding it among the children of .input-number.group parent
  const o = $(target).closest('.input-number-group').find('input');    
  const currValue = (o.val() === undefined || o.val() === '') ? 0 : parseInt(o.val());    
  o.val( currValue-1 );
}

.input-group-button{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
    <div >
         <span >-</span>
    </div>
    <input  type="number" value="0" min="0" max="1000">
    <div >
         <span > </span>
    </div>
</div>