The class is failing to be applied to the parent div that holds an id starting with the letter x

Question

The class is failing to be applied to the parent div that holds an id starting with the letter x

I have been attempting to assign a class to the parent container when the child element has the 'hidden' class. If not, then a different class should be added.

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>

If a span element with an ID starting with mission_participant_new contains a class named hidden, it will add a class called lss_new_case_in_progress to the containing parent div whose ID starts with mission_panel. Otherwise, it adds the class lss_new_case.

This <div id="mission_XXXXX"> appears multiple times within the DOM structure. Can someone assist me in identifying the issue?

javascript jquery html css

Answer 1

Answer №1

When you call tagMissions, make sure you are doing so within the context of a DOM element. If not, this will default to the window object, causing $(window).closest(...) to retrieve nothing.

It seems like your intention is to iterate over all elements with the naming convention mission_participant_new_XXX. To achieve this, you should use .each() for looping which will set this as the current iteration element.

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>

If you prefer not to loop, you can directly target elements using two selectors:

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

I suggest avoiding ID prefixes in selectors. Instead, assign a common class to elements with the same prefix, allowing you to simply use $('.mission_participant_new') for selection.

Answer 2

When you call tagMissions, make sure you are doing so within the context of a DOM element. If not, this will default to the window object, causing $(window).closest(...) to retrieve nothing.

It seems like your intention is to iterate over all elements with the naming convention mission_participant_new_XXX. To achieve this, you should use .each() for looping which will set this as the current iteration element.

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>

If you prefer not to loop, you can directly target elements using two selectors:

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

I suggest avoiding ID prefixes in selectors. Instead, assign a common class to elements with the same prefix, allowing you to simply use $('.mission_participant_new') for selection.

The class is failing to be applied to the parent div that holds an id starting with the letter x

Answer №1

Similar questions

Tips for removing special characters from HTML?

Issue with JSON or Jquery: Uncaught error message: Cannot access property 'error' as it is null

The Express app.post endpoint is not acknowledging incoming POST requests from Postman

Trapped in the Web of Facebook OAuth

Unable to retrieve Dictionary(Of String, String) using a GET ajax web request, but it functions properly with a POST request

What process allows for this Twitter API response to be converted into HTML format automatically?

JavaScript: The variable `scopes` is declared

Jquery failing to function properly when scrolling

What could be causing Prettier code formatter to suddenly stop formatting in VS Code?

Accessing data outside of the scope when looping through items in Angular forEach

Maintain the fixed position of the table header while scrolling

Enabling Multiple Login Feature in Node.js

Creating a unique directive specifically designed to be used within an ng

There seems to be an issue with the bootstrap datepicker as it is throwing an error stating that $(

Using fancybox to send an ajax post request to an iframe

Different ways to create audio using GWT

There's just something really irritating me about that Facebook Timer feature

Is it possible to use Material-UI Link along with react-router-dom Link?

AJAX Post data transmission on the network: Enhancing data formatting

Trigger Function on Input Change in Angular 2