Question

当子元素具有“隐藏”类时，我一直在尝试将一个类添加到父容器中，否则它应该添加一个不同的类。

function tagMissions() {
  if ($('span[id^="mission_participant_new"]').hasClass('hidden')) {
    $(this).closest('div[id^="mission_panel"]').addClass('lss_new_case_in_progress');
  } else {
    $(this).closest('div[id^="mission_panel"]').addClass('lss_new_case');
  }
}

tagMissions();

<div id="mission_474453321" mission_id="474453321" mission_type_id="239" class="missionSideBarEntry" latitude="48.464928" longitude="11.929025" target_latitude="null" target_longitude="null">
  <!-- this is the parent div i am trying to assign the class to -->
  <div id="mission_panel_474453321" class="panel panel-default">
    <div id="mission_panel_heading_474453321" class="panel-heading">
        <a href="/missions/474453321" class="btn btn-default btn-xs lightbox-open" id="alarm_button_474453321"> Alarm</a>
        <span id="mission_participant_474453321" class="glyphicon glyphicon-user"></span>
        <!-- this is the span element with the id beginning with mission_participant_new_ -->
        <span id="mission_participant_new_474453321" class="glyphicon glyphicon-asterisk hidden"></span>
        <a href="" id="mission_caption_474453321" class="map_position_mover" target_latitude="null" target_longitude="null" data-latitude="48.464928" data-longitude="11.929025">Verkehrsunfall mit Linienbus</a></div>
    <div
      class="panel-body">
      <div class="row">
        <div class="col-xs-1"><img src="/Bus_rot.png?1484350177" id="mission_vehicle_state_474453321" class="mission_vehicle_state"></div>
        <div class="col-xs-11">
          <div id="mission_bar_outer_474453321" class="progress progress-striped mission_progress">
            <div id="mission_bar_474453321" class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
          </div>
          <div id="mission_missing_474453321" class="alert alert-danger">Zusätzlich benötigte Fahrzeuge: 1 FwK</div>
          <ul id="mission_patients_474453321"></ul>
          <ul class="mission_prisoners" id="mission_prisoners_474453321"></ul>
        </div>
      </div>
  </div>
</div>
</div>

因此，当ID为span的{{1}}元素有一个名为mission_participant_new的类时，它应该向父hidden添加一个类，其id开头为{ {1}}调用div。如果未提供课程mission_panel，则应添加lss_new_case_in_progress。

在DOM中多次提供此hidden。你能帮助我吗？我似乎无法找到错误。

Answer 1

您未在DOM元素的上下文中调用tagMissions，因此this默认为window对象，$(window).closest(...)不会找到任何东西。

看起来您打算遍历所有mission_participant_new_XXX元素，因此您需要使用.each()。它将this设置为迭代的当前元素。

＆＃13;

function tagMissions() {
  $('span[id^="mission_participant_new"]').each(function() {
      if ($(this).hasClass('hidden')) {
        $(this).closest('div[id^="mission_panel"]').addClass('lss_new_case_in_progress');
      } else {
        $(this).closest('div[id^="mission_panel"]').addClass('lss_new_case');
      }
    }
  });
}

tagMissions();

＆＃13;

<div id="mission_474453321" mission_id="474453321" mission_type_id="239" class="missionSideBarEntry" latitude="48.464928" longitude="11.929025" target_latitude="null" target_longitude="null">
  <!-- this is the parent div i am trying to assign the class to -->
  <div id="mission_panel_474453321" class="panel panel-default">
    <div id="mission_panel_heading_474453321" class="panel-heading">
      <a href="/missions/474453321" class="btn btn-default btn-xs lightbox-open" id="alarm_button_474453321"> Alarm</a>
      <span id="mission_participant_474453321" class="glyphicon glyphicon-user"></span>
      <!-- this is the span element with the id beginning with mission_participant_new_ -->
      <span id="mission_participant_new_474453321" class="glyphicon glyphicon-asterisk hidden"></span>
      <a href="" id="mission_caption_474453321" class="map_position_mover" target_latitude="null" target_longitude="null" data-latitude="48.464928" data-longitude="11.929025">Verkehrsunfall mit Linienbus</a></div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-1"><img src="/Bus_rot.png?1484350177" id="mission_vehicle_state_474453321" class="mission_vehicle_state"></div>
        <div class="col-xs-11">
          <div id="mission_bar_outer_474453321" class="progress progress-striped mission_progress">
            <div id="mission_bar_474453321" class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
          </div>
          <div id="mission_missing_474453321" class="alert alert-danger">Zusätzlich benötigte Fahrzeuge: 1 FwK</div>
          <ul id="mission_patients_474453321"></ul>
          <ul class="mission_prisoners" id="mission_prisoners_474453321"></ul>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

你也可以不用循环来做，只需使用两个选择器：

$('span[id^="mission_participant_new"].hidden').closest('div[id^="mission_panel"]').addClass('lss_new_case_in_progress');
$('span[id^="mission_participant_new"]:not(.hidden)').closest('div[id^="mission_panel"]').addClass('lss_new_case');

我还建议您避免在选择器中使用这样的ID前缀。为类提供相同前缀的所有元素，因此您只需使用$('.mission_participant_new')即可找到它们。

未添加到父div的类，其中包含以x开头的id

1 个答案: