9

I want the next Element with the same class. So I have a click action on the class "calculationContainer". When I click this element, I want to have access of the next element with the class "calculationContainer". But all I tried doesn't work. Maybe someone can help me with this?

I have this HTML Code:

<div class="body">
    <div class="inner">
        <div class="calculationContainer">
            <div class="element">
                <input type="text" id="name1">
            </div>
        </div>
    </div>
</div>
<div class="body">
    <div class="inner">
        <div class="calculationContainer">
            <div class="element">
                <input type="text" id="name2">
            </div>
        </div>
    </div>
</div>
<div class="body">
    <div class="inner">
        <div class="calculationContainer">
            <div class="element">
                <input type="text" id="name3">
            </div>
        </div>
    </div>
</div>

And my jQuery:

$('.calculationContainer').on('click', function() {
        var amountCalculationContainer = $(this);
        var nextAmountCalculationContainer = amountCalculationContainer.next('.calculationContainer');  //<- Only finds the div with class "element"

});
0

3 Answers 3

9

A technique that won't break if you change the structure of the HTML is to:

  1. Use .index() to find the container in a list of all the containers
  2. Increment the index
  3. Call .eq() to select the next container regardless of where it is in the DOM

JavaScript:

const next = (event) => {
   const list =   $('.calculationContainer');   //all containers
   const index =  list.index($(event.target));  //current container
   const target = (index + 1) % list.length;    //increment with wrap
   const nextAmountCalculationContainer = list.eq(target);
   console.log('Next:', nextAmountCalculationContainer);
   };
$('.calculationContainer').click(next);

See if you can catch the red button:
https://jsfiddle.net/pilafmon/8pq4zera/
screenshot

1
  • 1
    Perfect. This finds the next element with the same class as current and also omits all without class in question.
    – warmwhisky
    Commented Apr 24, 2022 at 8:05
8

Try This :-

$('.calculationContainer').on('click', function() {
    var $elem = $(this).closest('div.body').next().find('div.calculationContainer')    
});

Use .closest() to traverse up and find first div.body parent and then use .next() to get next element and then find div.calculationContainer with .find().

Handle the situation when .calculationContainer is at last position(as shown in demo).

DEMO

2
  • I get back an empty object in this case
    – Zwen2012
    Commented Apr 29, 2016 at 6:10
  • @Zwen2012..check demo. Commented Apr 29, 2016 at 6:11
1

Try this:

$('.calculationContainer').on('click', function() {
    var next_ele = $(this).parents("body").find(".calculationContainer");
    var $next = next_ele.filter(":gt(" + next_ele.index(this) + ")").first()
    console.log($next.html())
  });
3
  • Sorry, but it finds the input field, don't know why
    – Zwen2012
    Commented Apr 29, 2016 at 6:10
  • ok so you want - <div class="calculationContainer"> <div class="element"> <input id="name2" type="text"> </div> </div> like this? Commented Apr 29, 2016 at 6:14
  • I think it would work when I use the correct class :-) Thanks for your help!!
    – Zwen2012
    Commented Apr 29, 2016 at 6:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.