如何在使用 JQuery 的类之后获得唯一的下一个元素？答案

【问题标题】：How can I get the only one next element after a class with JQuery?如何在使用 JQuery 的类之后获得唯一的下一个元素？
【发布时间】：2013-07-22 12:20:48
【问题描述】：

当用户单击特定图标时，我试图在列表中显示一个列表。这是我的代码。

HTML：

<li class="filename"><img src="expand.png" /> Lorem ipsum dolor sit amet</li>
<ul class="datalog">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>
<li class="filename">
<img src="expand.png" /> Lorem ipsum dolor sit amet</li>
<ul class="datalog">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

jQuery :

$('.filename img').click(function () {
    $('.filename').next(".datalog").show();
});

这是JSFiddle

我也尝试过最接近或儿童之类的功能，可能实现不好，没有成功。

在我的示例中只有两个主列表，但在应用程序中列表的数量是可变的（所以我不能真正使用索引）。

如何只显示与点击相关的列表？

【问题讨论】：

标签： jquery html list class next

【解决方案1】：

试试这个以获得完整的过程

$(document).ready(function(){

    $('.filename img').click(function () {
        if( $(this).closest('li').next('.datalog').is(':hidden')) {
        $(this)                   // Get the current img being clicked
             .closest('li')       // Go to the closest parent `li` to the img
             .next('.datalog')    // Go to the next sibling of the `li`
             .show();             // Show the `ul` with the class `.datalog`
        } else {
               $(this)                   // Get the current img being clicked
             .closest('li')       // Go to the closest parent `li` to the img
             .next('.datalog')    // Go to the next sibling of the `li`
             .hide();             // Show the `ul` with the class `.datalog`
        }
    });
});

【讨论】：

【解决方案2】：

使用this参考

$('.filename img').click(function () {
   $(this).parent().next(".datalog").show();
});

解释

$(this)-->current clicked element , which is img
parent()--> go to parent which is `li`
.next(".datalog") --> go to the next element whose class is `.datalog`, that is `ul` 
.show()  -->show

fiddle here

【讨论】：

$(this) 似乎不起作用。如果我再次尝试使用$('.filename')，我会得到相同的结果（顺便说一句，我意识到这是合乎逻辑的，因为它定义了所有类......）。
欢迎......快乐的编码......很高兴它帮助......
哦，是的，可能有用！谢谢。

【解决方案3】：

你可以这样做：

$('.filename img').click(function () {
    $(this)                   // Get the current img being clicked
         .closest('li')       // Go to the closest parent `li` to the img
         .next('.datalog')    // Go to the next sibling of the `li`
         .show();             // Show the `ul` with the class `.datalog`
});

FIDDLE DEMO #1

你也可以试试这个：

$('.filename img').click(function () {
    $(this).closest('li').next('.datalog').show().siblings('.datalog').hide();
});

FIDDLE DEMO #2

【讨论】：

【解决方案4】：

使用此代码：

$('.filename img').click(function () {
    $(this).parent().next().show();
});

http://jsfiddle.net/Lnxdf/6/

【讨论】：

【解决方案5】：

http://jsfiddle.net/Lnxdf/9/

$('.filename img').click(function () {
    $(this).parent().next('ul.datalog').show();
});

虽然我不太喜欢这样的结构

【讨论】：

【解决方案6】：

$('.filename img').click(function () {
    $(this).closest('li').next(".datalog").show();
});

演示---->http://jsfiddle.net/Lnxdf/2/

【讨论】：