title: How specific do you need to be when targeting classes with jQuery?
body: <p>I have a simple <code>each()</code> that isn't working and in the past what I've found is that sometimes an element is nested too deeply and you need to be more specific. I am trying to find out if depending on certain levels you need divs or other identifiers?</p>
  
  <p>My goal here is to eventually go through every element with the <code>shortpoint-list-item-subtitle</code> and <code>shortpoint-listitem-title</code> class and replace the ISO formatted dates with readable dates via Moment.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $( window ).load(function() {
      $('.shortpoint-listitem-subtitle').each(function() {
      var currentElement = $(this);
      var value=currentElement.val();
      console.log(value);     
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>From what I can tell there's nothing about the code that shouldn't work. However like I said <code>.shortpoint-listitem-subtitle</code> may be nested too deeply. The value of <code>value</code> is not being logged in the console.</p>
  
  <p>This is what the selector looks like using Chrome</p>
  
  <pre><code>#shortpoint-gt-3-i-3 &gt; div &gt; div &gt; div.sp-type-file-list-item.sp-attr-connect.shortpoint-dynamic.shortpoint-dynamic-loaded.sp-meta-allow-content.shortpoint-child.shortpoint-dynamic-block.shortpoint-listitem.shortpoint-dynamic-514 &gt; div &gt; div.shortpoint-listitem-content &gt; div.shortpoint-listitem-description
  </code></pre>
  
  <p>Underlying HTML</p>
  
  <p><a href="https://pastebin.com/ZkXRHNB1" rel="nofollow noreferrer">https://pastebin.com/ZkXRHNB1</a></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  
  var timeout = null;
  function waitForDom () {
    console.log("Checking DOM...");
    // check for the elements you expect to exist
    if ($(".shortpoint-listitem-subtitle").length) {
      $(".shortpoint-tab-title").click(function() {waitForDom();});
      clearTimeout(timeout);
      formatDates();
    }
    else {
      // adjust timeout time to whatever feels appropriate to you
      timeout = setTimeout(waitForDom, 500);
    }
  }
  
  waitForDom();
  
  function formatDates() {
  $('.shortpoint-listitem-subtitle, .shortpoint-listitem-description').each(function() {
    var currentElement = $(this);
    var value=currentElement.text();
    var dateParseRegex = /\d\d\d\d[-]\d\d[-]\d\d[T]\d\d[:]\d\d:\d\d[.]\d{7}[Z]/g;
    var formattedDate = value.replace(dateParseRegex, function (match) {
      return moment(match).format("MMMM Do YYYY, h:mm:ss a");
    });
    currentElement.text(formattedDate);  
  });
  }
  
  setTimeout(function () {
    var content = '';
    $(".content").append(content);
  }, 2300);
  &lt;/script&gt;
  </code></pre>