javascript or jquery find nextSibling

Question

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

<div class="input-group input-number-group">
    <div class="input-group-button" onclick="decrement_cart(this)">
         <span class="input-number-decrement">-</span>
    </div>
    <input class="input-number text-center" type="number"
                                value="{{ $detail['product_quantity'] }}" min="0" max="1000">
    <div class="input-group-button" onclick="increment_cart(this)">
         <span class="input-number-increment">+</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'));
}

`addEventListener` and a dynamically created document are not mutually exclusive. See https://stackoverflow.com/q/1687296/1169519 — Teemu, May 23 '22 at 09:38

Diego D · Accepted Answer · 2022-05-23T11:42:41.853

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 class="input-group input-number-group">
    <div class="input-group-button">
         <span class="input-number-decrement">-</span>
    </div>
    <input class="input-number text-center" type="number" value="0" min="0" max="1000">
    <div class="input-group-button">
         <span class="input-number-increment">+</span>
    </div>
</div>

Yes, as you say , I maded addEvenetListener but don't called any way! but next and prev works fine. so my current problem is finding parent attribute... — aref razavi, May 23 '22 at 10:45
yes as I said it's something you can do.. but that's not something feasible following the question as you asked. Because you didn't include the moment when those elements exist so it's impossible to demonstrate any code that would fit in your scenario. The parent element with jquery is obtained with `.closest(selector)` but you changed the terms of your question (according to your last comment) and just dismissed the answer so it's impossible to go any further — Diego D, May 23 '22 at 11:29
I updated my answer to include an example that shows how to get the input element using `closest().find()` and having the handlers attached via js — Diego D, May 23 '22 at 11:43

javascript or jquery find nextSibling

1 Answers1