javascript - 类未添加到包含以 x 开头的 id 的父 div

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>

所以当 span id 以 mission_participant_new 开头的元素有一个类叫做 hidden ，它应该向父级添加一个类 div id以mission_panel开头称为 lss_new_case_in_progress .如果类hidden没有给出，应该加上lss_new_case .

这<div id="mission_XXXXX">在 DOM 中多次给出。你们能帮帮我吗？我似乎找不到错误。

Answer 1

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

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

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();

<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>

你也可以不用循环，只用两个选择器:

$('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') 来找到它们。