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

Question

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

我想做的很简单，有两个 div 的类是“panel-heading”，另一个是类“panel-collapse”，那里是两个条件，

条件 1：如果 'panel-collapse' 有类 'collapse' 添加一些 html 到 'panel-heading'

条件 2：如果 'panel-collapse' 有类 'collapse' 添加一些不同的 html 到 'panel-heading'

代码如下：

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/