Question

首先，这是小提琴：http://jsfiddle.net/krish7878/rwz7egdz/1/

我想要做的很简单，有两个div用“ panel-heading ”和其他类“面板折叠”，那里是两个条件，

条件1：如果'panel-collapse'有类'collapse'，请将'html'添加到'panel-heading'

条件2：如果'panel-collapse'有类“崩溃”，请在'panel-heading'中添加一些不同的html

以下是代码：

HTML：

<div class="panel-heading">
Panel Heading
</div><!-- /.panel-heading-->
<div class="panel-collapse collapse">
    Panel Collapse with a just a collapse
</div><!-- /.panel-collapse -->
<br><br>
<div class="panel-heading">
Panel Heading
</div><!-- /.panel-heading-->
<div class="panel-collapse collapse in">
    Panel Collapse with collapse &amp; in 
</div><!-- /.panel-collapse -->

JS代码：

 $( ".panel-heading" ).next().hasClass(".collapse").append( "<i class='fa fa-plus'></i>" );

 $( ".panel-heading" ).next().hasClass(".collapse.in").append( "<i class='fa fa-minus'></i>" );

我很确定我在js部分遗漏了一些东西。任何帮助，将不胜感激。

Answer 1

您无需链接next和hasClass。您只需查询next()即可。

$(".panel-heading").next(".collapse:not(.in)")
                   .append("<i class='fa fa-plus'></i>");

$(".panel-heading").next(".collapse.in")
                   .append("<i class='fa fa-minus'></i>");

以上是你的小提琴。

由于您的初始解决方案失败的原因，请参阅@ cgatian的回答。

编辑：更新以反映评论：

$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");

那么为什么这样呢？我们正在使用兄弟运算符立即找到所有.collapse / .collapse.in元素，然后遍历一个元素并追加到该元素。

Answer 2

此失败的实际原因是因为您使用了：

.hasClass(".collapse")

方法调用中有一段额外的时间。它应该是：

.hasClass("collapse")

类是否需要选择器，只需要类名

的字符串

<强>更新

修复选择器后，hasClass（）返回一个布尔值，而不是具有该类的元素。在@Darko Z的回答基础上，您需要以下内容。

$( ".panel-heading" ).next(".collapse").append( "<i class='fa fa-plus'></i>" );

 $( ".panel-heading" ).next(".collapse.in").append( "<i class='fa fa-minus'></i>" );

http://jsfiddle.net/brrbq03L/

如果下一个元素有一个类，则将div添加到div

2 个答案: