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

Question

首先是 fiddle :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>");

以上内容适用于您的 fiddle 。

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

编辑:更新以反射(reflect)评论:

$(".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 元素，然后遍历回一个元素并附加到该元素。