Capitalise HTML Element Targeted by CSS Selectors Using jQuery

  • Unknown's avatar
    yousufkhan34556 · Member ·

    I have an Elementor widget inside me website https://tinyurl.com/4ucs866b 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.

    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.

    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.

    The css selectors needed to target the a tags are as follows:

    .woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a

    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.

    I’ve mostly been trying exampls from [this thread][1].

    Here is what I think is the closest I’ve come:

    <script>
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;
}
</script>

<script>
  jQuery('.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a').capitalize();
</script>

    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.

    This code is currently being run from a HTML widget in the Elementor archive template where this list appears.

    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.

    Many thanks.

  • Unknown's avatar
    younuskorai345 · Member ·

    I think you have to ask this question on related forum bro Like wordpress.org this forum is dedicated to those site that hosted on wordpress.com. And i think that you have to ask related plugin forum instead of wordpress fixing forum.

  • The topic ‘Capitalise HTML Element Targeted by CSS Selectors Using jQuery’ is closed to new replies.