javascript - 找到第一个下一个元素，然后停止搜索

Question

如何使用 jQuery 来选择特定元素之后(不是立即)出现的第一个元素？我有这个 list 。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="tr current">Item 3</li>
    <li>Item 4</li>
    <li class="tr">Item 5</li>                                          
    <li>Item 6</li>            
    <li class="tr">Item 7</li>                        
    <li>Item 8</li>   
</ul>

如何使用 jQuery 使用 tr current(项目 3)选择/操作第一个出现的 tr(项目 5)？这个我试过了。

// This apply background color to the next immediate (Item 4) as its definition.
$('.tr.current').next().css('background-color', '#000');

// This apply to background color all next Items
$('.tr.current').nextAll().css('background-color', '#000');     

// This apply to background color all next Items with class tr (Item 5, Item 7)
$('.tr.current').next('.tr').css('background-color', '#000');       

Answer 1

将 .nextAll() 与 :first 选择器一起使用:

$('.tr.current').nextAll('.tr:first').css('background-color', '#000');     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li class="tr current">Item 3</li>
            <li>Item 4</li>
            <li class="tr">Item 5</li>                                          
            <li>Item 6</li>            
            <li class="tr">Item 7</li>                        
            <li>Item 8</li>                                    
</ul>