点击DOM即可获得下一个且仅限课程

时间:2014-11-10 04:47:58

标签: javascript jquery html

点击更多信息时,我试图让下一堂课出现。

          <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并找到并且最接近,但它不起作用。

谢谢。

1 个答案:

答案 0 :(得分:2)

使用.nextAll()方法:

&#13;
&#13;
$(function () {
    $('.more-infos').on('click', function (e) {
        var $info = $(this).nextAll('.more-infos-container').eq(0);
        alert($info.html());
    });
});
&#13;
<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>
&#13;
&#13;
&#13;