title: Capitalise HTML Element Targeted by CSS Selectors Using jQuery
body: <p>In line with previous questions, I have another jQuery problem that's doing my head in.</p>
  <p>I have an Elementor widget that's outputting a list of attributes that I'm using as a filterable list, so basically, it's a bunch of a tags inside li's.</p>
  <p>The problem is, these are being pulled from a different system (long story, not relevant to the question) and it is passing them across in all caps.  I want them displaying as capitalised, but because of the nature of text-transform, CSS can't help me.</p>
  <p>I've used text-transform to make them all lower case, and now I just want to use jQuery to capitalise them.  It needs to be every word as some entries have multiple words in them.  However, I'm not getting any results.</p>
  <p>The css selectors needed to target the a tags are as follows:</p>
  <pre><code>.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a
  </code></pre>
  <p>I've tried loads of different scripts and messed with them for a good hour or two now and managed to get rid of errors (like $ is not a function) but cannot get the text to captialise.</p>
  <p>I've mostly been trying exampls from <code>[this thread][1]</code>.</p>
  <p>Here is what I think is the closest I've come:</p>
  <pre><code>&lt;script&gt;
  jQuery.fn.capitalize = function() {
    jQuery(this[0]).keyup(function(event) {
      var box = event.target;
      var txt = $(this).val();
      var stringStart = box.selectionStart;
      var stringEnd = box.selectionEnd;
      jQuery(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
          return $word.toUpperCase();
      }));
      box.setSelectionRange(stringStart , stringEnd);
    });
  return this;
  }
  &lt;/script&gt;
  
  &lt;script&gt;
    jQuery('.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a').capitalize();
  &lt;/script&gt;
  </code></pre>
  <p>I'm fully aware that it's not structured particularly well and I know it can be neater, but I have tried numerous ways around it to no avail.</p>
  <p>This code is currently being run from a HTML widget in the Elementor archive template where this list appears.</p>
  <p>I'd really appreciate it is someone could point out the probably really obvious problems so I can learn from how dumb I'm being.</p>
  <p>Many thanks.</p>