Question

我正在尝试设置点击功能，当您点击h3标记时，它会找到em和br的所有下一个实例，直到h3的下一个实例{1}}并展示它们。这里有一个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

使用https://github.com/floatinghotpot/cordova-plugin-nativeaudio之类的

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

Answer 2

AmmarCSE让它更快，但无论如何 - 这里是一个jQuery函数.nextUntil()，它将1）完成当前元素旁边的所有元素和2）过滤结果集。这是工作示例：

$(document).ready(function () {

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

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

    });        

});

jQuery：获取某些元素的下一个实例

2 个答案: