在 DOM 中单击时获取下一个也是唯一的类

Posted 2023-02-25

【中文标题】在 DOM 中单击时获取下一个也是唯一的类

【英文标题】：Get next and only class on click in the DOM

【发布时间】：2014-11-10 04:47:57

【问题描述】：

我正在尝试在单击更多信息跨度时显示下一个课程。

          <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>

理想情况下，当您单击更多信息链接时，它将显示最接近自身的更多信息容器。这是如何实现的？

我尝试使用 next 和 find 和最接近，但它不起作用。

谢谢。

【问题讨论】：

Efficient, concise way to find next matching sibling?的可能重复

【参考方案1】：

使用.nextAll()方法：

$(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>