javascript - 根据其最优先的子 jQuery 动态更改父级

Question

在任务模块上工作，根据截止日期有不同的任务颜色，任务将在不同的类别下( Accordion )。

我们想根据其最优先的任务设置类别( Accordion )的颜色，例如其中任务类“task-overdue-hard”优先于“task-overdue”。

Priority: task-overdue-hard,task-overdue,task-due,task-default,task-completed

    $('#sub_created_accordion .panel').each(function () {
        var classes = "";
        $(this).find('.task').each(function () {
            classes += $(this).attr('class') + " ";
        });
        classes = classes.replace(/task /g,"");
        $(this).find('.panel-heading').addClass(classes)
    });

/* Common styles for all types */
.task {
  padding: 10px 15px;
  margin: 10px 0;
  border: 1px solid #eee;
  border-left-width: 10px;
  border-radius: 3px;
}
.task h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.task p:last-child {
  margin-bottom: 0;
}
.task code {
  border-radius: 3px;
}

/* Tighten up space between multiple callouts */
.task + .task {
  margin-top: -5px;
}
/* Variations */
.task-completed {
  border-left-color: #a5a5a5;
  color: #a5a5a5;
}
.task-default {
  border-left-color: #5bc0de;
}
.task-due {
  border-left-color: #f0ad4e;
}
.task-overdue {
  border-left-color: #d9534f;
}
.task-overdue-hard {
  border-left-color: #d9534f;
  color: #d9534f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel-group" id="sub_created_accordion" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading task-head-completed task-head-overdue task-head-overdue-hard task-head-due" role="tab" id="heading_created_3">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#sub_accordion" href="#collapse_created_3" aria-expanded="true" aria-controls="collapse_created_3">
                                    First Category <i class="fa pull-right fa-arrow-circle-o-right"></i>
                                </a>
      </h4>
    </div>
    <div id="collapse_created_3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="task task-completed">
          <h4>Title 3</h4>
        </div>

        <div class="task task-overdue">
          <h4>Title 2</h4>
        </div>
        <div class="task task-overdue-hard">
          <h4>Title 4</h4>
        </div>
        <div class="task task-due">
          <h4>Title 1</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading task-head-due" role="tab" id="heading_created_2">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#sub_accordion" href="#collapse_created_2" aria-expanded="true" aria-controls="collapse_created_2">
                                    Second Category <i class="fa pull-right fa-arrow-circle-o-right"></i>
                                </a>
      </h4>
    </div>
    <div id="collapse_created_2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="task task-due">
          <h4>Task 2 Wishlist </h4>
        </div>
      </div>
    </div>
  </div>
</div>

提前致谢。

Answer 1

$('#sub_created_accordion .panel').each(function () {
  if($(this).find(".task-overdue-hard").length>0){
  class1="task-overdue-hard";
  }
  else if($(this).find(".task-overdue").length>0){
   class1="task-overdue";
  }
  else if($(this).find(".task-due").length>0){
   class1="task-due";
  }
  else if($(this).find(".task-default").length>0){
   class1="task-default";
   }
  else if($(this).find(".task-completed").length>0){
   class1="task-completed";
   }
   $(this).addClass(class1+"parent");

https://jsfiddle.net/anubala/aL4kfw98/1/