Javascript jQuery按类单击时显示隐藏父项

我无法根据单击列表项的按钮切换（显示/隐藏）div

当我尝试时，它会同时影响到所有div。这是我的密码。我想把每一个项目的基础

<div class="list-item">
    <div class="list-content">
        <div class="list-updates">
            <a href="#" class="list-avatar"><img
                        src="images/avatar/avatar_<?php echo ( $i <= 8 ? '0' : NULL ) . $avatars[ $i ] ?>.jpg"
                        alt="user-avatar" width="40"
                        height="40"></a>
            <a href="#"><i class="material-icons"><?php echo get_icon( $update[ $i ] ) ?></i></a>
        </div>
        <div class="item-title"><a href="#"><?php echo $questions[ $i ] ?></a>
        </div>
        <div class="ans-box">
            <div class="ans-count"><?php echo $ans[ $i ] ?></div>
            <span><i class="material-icons meta-info-btn">keyboard_arrow_down</i></span>
        </div>
    </div>

    <div class="metas">
        <div class="update-info"><a href="#">commented</a> 1 hour ago in <a href="#">Plugins</a> by
            <a href="#">gurjyot</a>
        </div>
        <div class="counters">
            <span class="votes"><i class="material-icons">arrow_upward</i> +1245</span>
            <span class="views"><i class="material-icons">remove_red_eye</i> 50.2k</span>
        </div>
    </div>
</div><!-- list-item -->

$('.list-content .meta-info-btn').click(function () {
    alert('Clicked and found!');
    $(this).closest('.metas').slideToggle();
});

键盘箭头向下
1小时前在
向上箭头+1245
取下红色眼睛50.2k
$（'.list content.meta info btn'）。单击（函数（）{
警报（“单击并找到！”）；
$（this）.closest（'.metas'）.slideToggle（）；
});

试试这个

$（'.list content.meta info btn'）。单击（函数（）{
var id=$（this.parent（）.attr（'class'）；
警报（id）；
$（'#'+id）.slideToggle（）；
});

键盘箭头向下
1小时前在
向上箭头+1245
取下红色眼睛50.2k
试试这个

$('.list-content .meta-info-btn').click(function () {
    $(this).parents('.list-content').next('.metas').slideToggle(); 
});


$（'.list content.meta info btn'）。单击（函数（）{
$（this）.parents（'.list content'）.next（'.metas'）.slideToggle（）；
});

键盘箭头向下
1小时前在
向上箭头+1245
取下红色眼睛50.2k
键盘箭头向下1
1小时前在
向上箭头+1245
取下红色眼睛50.2k
您可以将.meta info btn和.list内容的点击事件分开，如下所示

    $('.meta-info-btn').click(function () {
        $(this).closest('.list-content').closest('.metas').slideToggle();
    });

    $('.list-content').click(function () {

        $(this).closest('.metas').slideToggle();
    });

尝试浮动到最近的顶部父div，然后使用find

$(this).closest('.list-item').find(".metas").toggle();


//添加一些数据。。。
var x=“”；
对于（变量i=0；i<5；i++）{
x+=”\
\
\
\
\
答案就在这里\
隐藏元\
\
\
元信息在这里\
\
";
}
$（“#目录”）。附加（x）；
// ----------------------------------
$（'.list content.meta info btn'）。单击（函数（）{
$（this）.closest（'.list item'）.find（“.metas”）.toggle（）；
});
div{
保证金：5px；
}
.元信息btn:悬停{
光标：指针；
}
.meta信息btn{
背景：#CCC；
边框：1px实心#999；
填充：2px；
保证金：5px；
}
.清单项目{
边缘底部：10px；
边框：1px纯黑；
填充物：5px；
}

Try
$（this）.closest（'.list item'）.find（'.metas'）.slideToggle（）@Tushar它不工作了。我在发帖之前已经试过了。有其他选择吗？请添加完整的相关HTML代码。最好使用StackSnippets创建实时演示。请尝试此$（this）.parent（）.parent（）.parent（）.next（'.metas'）.toggle（）@这是代码。您还需要什么？为什么不使用
最近的
而不是
父级.parent.parent…
太好了，它可以正常工作。。谢谢。。。有没有比多个
parent（）
更好的解决方案？@PrasannaVenkatesh
最近的
不起作用。我在发帖之前就试过了。但是，我相信一定有有效的方法可以做到这一点。如果您只有一个类名为“metas”的div，那么请尝试使用find（）而不是parent（）。或者，您可以为div提供一个ID，并使用它执行功能。是的，您可以执行类似@vinay-telled的操作。您可以使用
最近的
替换
父项
，这样就可以了
parents
将沿着DOM树查找是否还有其他父/祖先拥有该类<代码>最近的
将获取第一个祖先并返回<代码>最近的
在这种情况下更好。