Get next and only class on click in the DOM

Question

I am trying to get the next class to show up when clicking on a more-infos span.

          <span>Total Current Liabilities</span> <span class="more-infos">click</span>
          <input type="text" name="currentratio2"  placeholder="$"></input>
          <p class="more-infos-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eligendi hic minus dicta atque molestiae, qui suscipit </p>
          <span>Total Current Assets</span> <span class="more-infos">click</span>
          <input type="text" name="currentratio1"  placeholder="$"></input>      
          <p class="more-infos-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eligendi hic minus dicta atque molestiae, qui suscipit </p>

Ideally, when you click on a more-infos link it will show up the more-infos-container that is the closest to itself. How is that achievable ?

I tried using next and find and closest but it doesn't work.

Thank you .

possible duplicate of [Efficient, concise way to find next matching sibling?](http://stackoverflow.com/questions/4933236/efficient-concise-way-to-find-next-matching-sibling) — scrappedcola, Nov 10 '14 at 05:02

score 2 · Accepted Answer · answered Nov 10 '14 at 04:51

Use .nextAll() method:

$(function () {
    $('.more-infos').on('click', function (e) {
        var $info = $(this).nextAll('.more-infos-container').eq(0);
        alert($info.html());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span>Total Current Liabilities</span> <span class="more-infos">click</span>
<input type="text" name="currentratio2"  placeholder="$"></input>
<p class="more-infos-container">Liabilities Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eligendi hic minus dicta atque molestiae, qui suscipit </p>

<span>Total Current Assets</span> <span class="more-infos">click</span>
<input type="text" name="currentratio1"  placeholder="$"></input>      
<p class="more-infos-container">Assets Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eligendi hic minus dicta atque molestiae, qui suscipit </p>

Get next and only class on click in the DOM

1 Answers1