javascript - jQuery:获取某些元素的下一个实例

Question

我正在尝试设置一个点击功能，当您点击一个 h3 标签时，它将找到 em 和 br< 的所有下一个实例 直到 h3 的下一个实例并显示它们。这里有一个 jsFiddle 演示:http://jsfiddle.net/nm4a8njn/和下面的标记:

HTML:

<div class="col span_1_of_2">

<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>

<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>

<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>

<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>

<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>

</div>

CSS:

.span_1_of_2 h3 {
    cursor: pointer;
}

.span_1_of_2 em {
    display: none;
}

.span_1_of_2 br {
    display: none;
}

jQuery:

$(document).ready(function () {

    $(".span_1_of_2 h3").click(function () {

        $(this).closest(".span_1_of_2").find("em").show();

    });        

});

但如您所见，当您单击 h3 标记时，这会显示 em 的所有实例，而我只想定位 em 和 br 元素，直到 h3 的下一个实例。如果这可能的话？任何建议将不胜感激!

Answer 1

使用nextUntil()喜欢

 $(this).nextUntil("h3").show();

这将获取所有下一个兄弟元素直到提供的选择器

$(document).ready(function () {

    $(".span_1_of_2 h3").click(function () {

        $(this).nextUntil("h3").show();
            
    });        

});

.span_1_of_2 h3 {
    cursor: pointer;
}

.span_1_of_2 em {
    display: none;
}

.span_1_of_2 br {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col span_1_of_2">
    
<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>
    
<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>
    
<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>
    
<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>
    
<h3>Title</h3>

    <br/><em>text goes here</em> 
    <br/>
    <br/>
    <hr/>

</div>